以下のコードは、シリーズ一覧配列コレクションを使用してグラフ化するデータを組み込む方法を示しています。
seriesList: [{
type: "column", label: "西", legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [5, 3, 4, 7, 2] }
}, {
type: "column", label: "中央", legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [2, 2, 3, 2, 1] } }, {
type: "column", label: "東", legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [3, 4, 4, 2, 5] } }, {
type: "pie", label: "機種 1", legendEntry: true,
center: { x: 150, y: 150 }, radius: 60,
data: [{
label: "機種 2", legendEntry: true, data: 46.78, offset: 15 }, {
label: "機種 3", legendEntry: true, data: 23.18, offset: 0 }, {
label: "機種 4", legendEntry: true, data: 20.25, offset: 0 }]
}, {
type: "line", label: "米国", legendEntry: true, data: {
x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [3, 6, 2, 9, 5]
},
markers: { visible: true, type: "circle"
} }, {
type: "line", label: "カナダ", legendEntry: true, data: {
x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [1, 3, 4, 7, 2]
},
markers: { visible: true, type: "tri"
} }
] });
Wijdatasource
wijdatasource クラスを使用し、表形式のデータを wijwidget に提供できます。wijdatasource クラスを、データ リーダやオプションのプロキシと共に使用できます。jquery.wijmo.wijdatasource.js ライブラリには、リーダとプ ロキシクラスの２つのサンプルが含まれます。wijdatasource ウィジェットクラスは、
jquery.wijmo.wijdatasource.js ライブラリによって作成されます。
関連項目：
wijdatasource の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。
wijdatasource 依存関係
wijdatasource オプション
wijdatasource イベント
wijdatasource メソッド
wijdatasource プロパティ
Wijdatasource チュートリアル
以下のチュートリアルでは、wijdatasource とプロキシを使用してリモートデータをロードするリストを含む MVC プロジェクトの作成手順について説明します。
注意：このチュートリアルでは、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細に ついては、「MVC Classic プロジェクトの作成」トピックを参照してください。
手順 1：ビューの設定
この手順では、最初にビューを設定します。コンテンツをデータソースに追加します。
注意：この手順では、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細については、
「MVC Classic プロジェクトの作成」トピックを参照してください。
以下の手順を実行します。
1. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
2. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<div class="ui-widget">
<input style="width: 400px" id="testinput" type="textbox" class="ui-widget-content ui-corner-all"
/><input type="button" onclick="loadRemoteData()" id="loadremote" value="Load Remote Data" />
<div id="list" style="height: 300px; width: 400px;"></div>
</div>
このマークアップはテキストボックス、ボタン、およびリストを追加します。ボタンがクリックされると、リモー トデータソースからのデータがリストに表示されます。
この手順では、ビューを作成しました。次の手順「手順 2：ウィジェットの初期化」では、スクリプトを追加し、ウ ィジェットを初期化します。
手順 2：ウィジェットの初期化
前の手順では、マークアップを追加し、データソースページに表示するコンテンツを追加しました。この手順では、
必要な jQuery スクリプトを追加し、ウィジェットを初期化します。
以下の手順を実行します。
1. 前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijdatasource ウィジェ ットを初期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { var superPanelRefreshed = false;
var proxy = new wijhttpproxy({
url: "http://ws.geonames.org/searchJSON", dataType: "jsonp",
data: {
featureClass: "P", style: "full", maxRows: 12,
name_startsWith: 'ab' },
key: 'geonames' });
var myReader = new wijarrayreader([{
name: 'label',
mapping: function (item) {
return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName
} }, {
name: 'value', mapping: 'name' }, {
name: 'selected', defaultValue: false }]);
var list = $("#list");
var input = $('#testinput');
list.wijlist({
selected: function (event, ui) { var item = ui.item;
input.val(item.value);
list.wijlist('deactivate');
} });
datasource = new wijdatasource({
reader: myReader, proxy: proxy,
loading: function () {
input.addClass('wijmo-wijcombobox-loading');
},
loaded: function (data) {
list.wijlist('setItems', data.items);
list.wijlist('renderList');
list.wijlist('refreshSuperPanel');
input.removeClass('wijmo-wijcombobox-loading');
} });
datasource.load();
input.bind("keydown.wijcombobox", function (event) { var keyCode = $.ui.keyCode;
switch (event.keyCode) { case keyCode.UP:
list.wijlist('previous', event);
// 一部のブラウザでテキストフィールドの先頭へのカーソルの移動を禁止 event.preventDefault();
break;
case keyCode.DOWN:
if (!list.is(':visible')) { list.show();
return;
}
list.wijlist('next', event);
// 一部のブラウザでテキストフィールドの末尾へのカーソルの移動を禁止 event.preventDefault();
break;
case keyCode.ENTER:
event.preventDefault();
list.wijlist('select', event);
break;
case keyCode.PAGE_UP:
list.wijlist('previousPage');
break;
case keyCode.PAGE_DOWN:
list.wijlist('nextPage');
break;
default:
break;
} });
});
function loadRemoteData() {
datasource.proxy.options.data.name_startsWith = $('#testinput').val();
datasource.load();
</script>
このスクリプトは、リストとボタンを初期化し、wijdatasource を使用してリモートデータをリストにロードしま す。
アプリケーションを作成し、wijdatasource ウィジェットを追加して初期化しました。次の手順「手順 3：プロジ ェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。
手順 3：プロジェクトの実行
前の手順では、アプリケーションを作成し、wijdatasource ウィジェットを追加して初期化しました。この手順で は、アプリケーションの実行時のインタラクティブ操作を表示します。
以下の手順を実行します。
1. ［F5］を押して、アプリケーションを実行します。初期にデータがリストに表示されます。
2. ボタンをクリックします。新しいデータがリストにロードされます。
このチュートリアルでは、wijdatasource クラスを使用し、データをリストにロードしました。