Wijcombobox タスク別ヘルプ
タスク別ヘルプは、ASP.NET のプログラミングに精通し、コントロールの一般的な使用方法を理解しているユーザ ーを対象としています。 ヘルプに記述された手順に従うことによって、さまざまな wijcombobox 機能を実演する プロジェクトを作成して、wijcombobox の用途を理解することができます。
ComboBox の幅の変更
<style type="text/css" >
.wijmo-wijcombobox {
position: relative;
width:250px !important;
}
.wijmo-wijcombobox-input {
width:216px !important;
}
</style>
$("#tags").wijcombobox({
data: datasource, width: 150 });
$('.position').bind('change', changed);
});
function changed() {
$("#tags").wijcombobox('option', 'dropDownListPosition', { my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(), at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(), offset: $('#offset').val(),
collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val() });
} </script>
<div class="main demo">
<!-- デモマークアップの開始 -->
<div>
<input id="tags" />
</div>
<!-- デモマークアップの終了 -->
<div class="demo-options">
<!-- オプションマークアップの開始 -->
<div class="option-row">
<label for="my_horizontal">
Dropdown list:</label>
<select id="my_horizontal" class="position">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="my_vertical" class="position">
<option value="top">top</option>
<option value="middle">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div class="option-row">
<label for="at_horizontal">
Aligns to textbox:</label>
<select id="at_horizontal" class="position">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="at_vertical" class="position">
<option value="top">top</option>
<option value="middle">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div class="option-row">
<label for="offset">
With offset:</label>
<input onblur="changed()" id="offset" type="text" size="15" />
</div>
<div class="option-row">
<label for="collision_horizontal">
Horizontal collision detection:</label>
<select id="collision_horizontal">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="none">none</option>
</select>
<label for="collision_vertical">
Vertical collision detection:</label>
<select id="collision_vertical">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="none">none</option>
</select>
</div>
<!-- オプションマークアップの終了 -->
</div>
</div>
search メソッドを使用してテキストボックスに入力した文字を検索する
次のコードは、search メソッドを使用して wijcombobox のテキストボックスに入力した 4 つの値を使用して都市 名を検索する方法を示します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { var proxy = new wijhttpproxy({
url: "http://ws.geonames.org/searchJSON", dataType: "jsonp",
data: {
featureClass: "P", style: "full", maxRows: 12 },
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 datasource = new wijdatasource({
reader: myReader, proxy: proxy });
$("#tags").wijcombobox({
data: datasource, showTrigger: false, search: function (e, obj) {
obj.datasrc.proxy.options.data.name_startsWith = obj.term.value;
},
select: function (e, item) {
$('#output').html('出身地： ' + item.label);
} });
});
</script>
<div class="main demo">
<!-- デモマークアップの開始 -->
<label for="tags">
都市を検索する 4 文字を入力します</label>
<input id="tags" style="width: 300px" />
<p>
<label id="output">
</label>
</p>
<!-- デモマークアップの終了 -->
<div class="demo-options">
<!-- オプションマークアップの開始 -->
<!-- オプションマークアップの終了 -->
</div>
</div>
select イベントを使用してコンボボックスで選択した項目をトリガーする
次のコードは、select イベントを使用してコンボボックスで選択した項目をトリガーする方法を示します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#tags").wijcombobox();
$("#states").wijcombobox();
});
</script>
<h2>
選択</h2>
<div class="main demo">
<!-- デモマークアップの開始 -->
<div>
<select id="states" onchange="$('#output').html('現在地：' + this.value)">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH" selected="selected">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<p>
<label id="output">
選択してください</label></p>
<!-- デモマークアップの終了 -->
<div class="demo-options">
<!-- オプションマークアップの開始 -->
<!-- オプションマークアップの終了 -->
</div>
</div>
Wijcompositechart
wijcomposite グラフウィジェットでは、複雑なデータを、ダッシュボードを備えた１つのグラフ面上で分析できま す。同じデータを異なる視覚化でオーバーレイしたり、関連するデータを一緒に表示して傾向を示すことができます。
wijbarchart を表示するビューの .cshtml ファイルを開きます。次のマークアップのように、<div> DOM 要素を 追加します。
<div id="compositechart">
</div>
ここで、wijbarchart ウィジェットを初期化する必要があります。これを行うには、次のスクリプトを .cshtml フ ァイルに追加できます。
<script type="text/javascript">
$(document).ready(function () {
$("#compositechart").wijcompositechart({
});
});
</script>
関連項目：
wijcompositechart の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧くだ さい。
Wijcompositechart 依存関係
Wijcompositechart オプション
Wijcompositechart イベント
Wijcompositechart メソッド
Wijcompositechart チュートリアル
以下のチュートリアルでは、X と Y 軸のテキスト設定、グラフへのヘッダー要素の追加、グラフ凡例へのラベルテ キストの追加、グラフへのデータ移植の手順について説明します。
このトピックでは、ASP.NET MVC 3 Wijmo アプリケーションを作成済みであることが前提となります。作成して いない場合は、「MVC Classic プロジェクトの作成」を参照してください。
手順 1：ビューの設定
この手順では、マークアップを追加し、コンテンツを複合グラフに追加します。以下を実行します。
1. Microsoft Visual Studio の［ファイル］メニューから、[新しいプロジェクト］を選択します。［新しいプロジェ クト］ダイアログボックスが開きます。
2. テンプレートの［Visual Basic］または［Visual C#］より［Web］を選択します。
3. 右ペインから［ASP.NET MVC 3 Wijmo アプリケーション］を選択します。
Wijmo プロジェクトが作成されます。プロジェクトに Wijmo for MVC チュートリアルで作業する Models、
Views、および Controllers フォルダが含まれていることがわかります。
4. ソリューションエクスプローラで、Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックし て、ファイルを開きます。
5. 次のマークアップをページの <body> タグ内に追加します。このマークアップは棒のコンテンツをページに追加し ます。複合グラフの幅と高さはここで定義されます。
<div id="wijcompositechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px;
height: 475px">
</div>
手順 2：ウィジェットの初期化
前の手順では、マークアップを追加し、複合グラフに表示するコンテンツを追加しました。ここで、jQuery スクリ プトを追加し、ウィジェットを初期化して、さらに、X と Y 軸のテキスト設定、グラフラベルへのツールチップの 追加、「ハードウェア販売」という名前のグラフヘッダーの追加を行った後、seriesList を使用して X 軸に文字列 データと Y 軸に数値データを持つ３つのデータ系列を作成できます。
前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijcompositechart ウィジェ ットを初期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijcompositechart").wijcompositechart({
axis: { y: {
text: "ハードウェア数"
}, x: { text: ""
} },
stacked: false, hint: {
content: function () {
return this.label + '<br/> ' + this.y + '';
}
},
header: {
text: "ハードウェア分布"
},
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: "asdfdsfdsf", 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"
} } ] });
});
</script>
手順 3：プロジェクトの実行
この手順では、アプリケーションを実行し、新しいデータやグラフ要素（X 軸と Y 軸のタイトル、グラフヘッダー、
およびグラフラベルなど）を観察します。
1. ［F5］を押して、アプリケーションを実行します。
2. 以下を観察します。
任意のグラフ系列の上にホバーします。ツールチップにその系列のラベルプロパティ値と Y 値が表示されること に注意してください。
ツールチップは次のコードを使用したときに表示されます。
hint: {
content: function () {
return this.label + '<br/> ' + this.y + '';
} },
次のコードを使用すると、グラフヘッダーのタイトルが表示されることに注意してください。
header: {
text: "ハードウェア分布"
},
円、縦棒、および折れ線グラフの３種類のグラフに、それぞれ複数のデータ系列を表示します。この結果を達成す るには、次のコードを使用します。
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: "asdfdsfdsf", 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"
} } ]
Y 軸タイトル「ハードウェア合計数」を複合グラフに適用し、X 軸タイトルを空の文字列にします。次のコードを 使用し、この結果を達成します。
axis: {
y: {
text: "ハードウェア数"
}, x: { text: ""
} },
Wijcompositechart タスク別ヘルプ
タスク別ヘルプは、ASP.NET のプログラミングに精通し、コントロールの一般的な使用方法を理解しているユーザ ーを対象としています。ヘルプに記述された手順に従うことによって、 C1CompositeChartのさまざまな機能を デモンストレーションするプロジェクトを作成して、C1CompositeChart コントロールの用途を理解することが できます。
軸のタスク
以下のトピックでは、Axis オブジェクトを使用して、グラフの X 軸と Y 軸を作成する方法や、軸の外観をカスタマ イズする方法（フォントスタイル、フォント色、およびフォントサイズの変更など）について説明します。