</p>
</div>
</div>
4. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力し、wijaccordion ウィジェット を初期化して event オプションを mouseover に設定します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#accordion").wijaccordion({
event: "mouseover"});
});
</script>
5. アプリケーションを実行し、マウスポインタをペインヘッダーの上に置くとペインが拡張されます。
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo.
Vivamus non quam. In suscipit faucibus urna.
</p>
</div>
<h3>
セクション 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
</div>
<h3>
セクション 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
</p>
</div>
</div>
4. 前の手順で追加した </div>終了タグの後に、以下の jQuery スクリプトを入力し、wijaccordion ウィジェットを 初期化して event オプションを mouseover に設定します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#accordion").wijaccordion({
requireOpenedPane: false});
});
</script>
5. アプリケーションを実行し、複数のヘッダーをクリックしてコンテンツペインが閉じないことを確認します。
Wijbarchart
wijbarchart ウィジェットでは、カスタマイズした横棒や縦棒グラフを作成できます。横棒グラフは、カテゴリ軸が 垂直軸になる反転した縦棒グラフです。横棒／縦棒グラフは各系列をクラスタ内の１本の棒として描画します。クラ スタの数は、データ内の各点の数です。各クラスタは、各系列の n 番目のデータ点を表示します。
wijbarchart を表示するビューの .cshtml ファイルを開きます。次のマークアップのように、<div> DOM 要素を追 加します。
<div id="barchart">
</div>
ここで、wijbarchart ウィジェットを初期化する必要があります。これを行うには、次のスクリプトを .cshtml フ ァイルに追加できます。
<script type="text/javascript">
$(document).ready(function () { $("#barchart").wijbarchart({
});
});
</script>
関連項目：
wijbarchart の詳細については、外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。
Wijbarchart 依存関係
Wijbarchart オプション
Wijbarchart イベント
Wijbarchart メソッド
Wijbarchart チュートリアル
以下のチュートリアルでは、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="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 650px;
height: 400px">
</div>
手順 2：ウィジェットの初期化
前の手順では、マークアップを追加し、棒グラフに表示するコンテンツを追加しました。ここで、jQuery スクリプ トを追加し、ウィジェットを初期化して、さらに、X と Y 軸のテキスト設定、グラフラベルへのツールチップの追 加、「ハードウェア販売」という名前のグラフヘッダーの追加を行った後、seriesList を使用して X 軸に文字列デ ータと Y 軸に数値データを持つ３つのデータ系列を作成できます。
前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijbarchart ウィジェットを 初期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijbarchart").wijbarchart({
axis: { y: {
text: "ハードウェア数"
}, x: { text: ""
} }, hint: {
content: function () {
return this.data.label + '<br/> ' + this.y + '';
} },
header: {
text: "ハードウェア分布"
},
seriesList: [{
label: "西", legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [5, 3, 4, 7, 2] } }, {
label: "中央", legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [2, 2, 3, 2, 1] } }, {
label: "東", legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [3, 4, 4, 2, 5] } }]
});
});
</script>
手順 3：プロジェクトの実行
この手順では、アプリケーションを実行し、新しいデータやグラフ要素（X 軸と Y 軸のタイトル、グラフヘッダー、
およびグラフラベルなど）を観察します。
1. ［F5］を押して、アプリケーションを実行します。
2. 以下を観察します。
任意のグラフ系列の上にホバーします。ツールチップにラベルプロパティの値やその系列の Y 値の説明が表示さ れることに注意してください。
ツールチップは次のコードを使用したときに表示されます：
hint: {
content: function () {
return this.data.label + '<br/> ' + this.y + '';
} },
次のコードを使用すると、グラフヘッダーのタイトルが表示されることに注意してください。
header: {
text: "ハードウェア分布"
},
３つのデータ系列に文字列の X データと数値の Y データを表示します。次のコードを使用し、この結果を達成し ます。
seriesList: [{
label: "西", legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [5, 3, 4, 7, 2] } }, {
label: "中央", legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [2, 2, 3, 2, 1] } }, {
label: "東", legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [3, 4, 4, 2, 5] } }]
Y 軸タイトル「ハードウェア合計数」を縦棒グラフに適用し、X 軸タイトルを空の文字列にします。次のコードを 使用し、この結果を達成します。
axis: {
y: {
text: "ハードウェア数"
}, x: { text: ""
} },
Wijbarchart タスク別ヘルプ
タスク別ヘルプは、ASP.NET のプログラミングに精通し、コントロールの一般的な使用方法を理解しているユーザ ーを対象としています。ヘルプに記述された手順に従うことによって、 C1BarChart のさまざまな 機能をデモンス トレーションするプロジェクトを作成して、C1BarChart コントロールの用途を理解することができます。