タブパネルによる切り替え表示を実装（2）
index.htmlにおけるタブパネルの記述
Webページのファイル（index.html）では、WijmoのCSSやJavaScriptファイルを参照して利用できるようにしていました。このうちWijmoのJavaScriptを参照する記述を、リスト1の通り修正します。
<script src="wijmo/controls/wijmo.min.js"></script> <script src="wijmo/controls/cultures/wijmo.culture.ja.min.js"></script> <script src="wijmo/controls/wijmo.chart.min.js"></script> <script src="wijmo/controls/wijmo.grid.min.js"></script> <script src="wijmo/controls/wijmo.nav.min.js"></script> <!-- 追加 -->
リスト1で参照しているWijmoのJavaScriptファイルを表2に示します。No.5が今回追加したファイルです。タブパネルはwijmo.navモジュールに含まれるため、wijmo.nav.min.jsの参照を追加します。
| No. | ファイル名 | 役割 |
|---|---|---|
| 1 | wijmo/controls/wijmo.min.js | Wijmo本体 |
| 2 | wijmo/controls/cultures/wijmo.culture.ja.min.js | カルチャ（日本語）ファイル |
| 3 | wijmo/controls/wijmo.chart.min.js | チャート（FlexChart）のファイル |
| 4 | wijmo/controls/wijmo.grid.min.js | グリッド（FlexGrid）のファイル |
| 5 | wijmo/controls/wijmo.nav.min.js | タブパネルなどナビゲーション部品のファイル |
次に、タブパネルを表示するようにindex.htmlのHTML記述を修正していきます。修正前は1個のFlexChartを表示していた箇所を、リスト2の通り変更します。
<div id="tab-panel"><!-- タブパネル ...（1）-->
<div class="tab-wrapper"><!-- タブの1項目 ...（2）-->
<a>気温</a><!-- タブの名称 ...（3）-->
<div class="tab-page"><!-- タブの1ページ ...（4）-->
<div id="chart1" class="chart"></div><!-- チャート1 -->
</div>
</div>
<div class="tab-wrapper">
<a>降水量</a>
<div class="tab-page">
<div id="chart2" class="chart"></div><!-- チャート2 -->
</div>
</div>
（略：チャート3～チャート5の記述）
</div>
（1）の<div id="tab-panel">要素にタブパネルを表示します。この中には、タブの1項目に対応する（2）の<div class="tab-wrapper">要素を、タブの個数だけ記述します。この内側には（3）の<a>要素でタブの名称を、（4）の<div class="tab-page">要素でタブの1ページの内容を、それぞれ記述します。ここでは気温のほか、降水量、日照時間、風速、湿度のチャートを含んだ、計5個のタブを記述します。
index.jsにおけるタブパネルと各チャート描画の実装
次にindex.jsで、タブパネルと、その中に表示する各要素を実装していきます。
まず、リスト2の記述をタブパネルとして表示する処理はリスト3の通りです。IDが「tab-panel」の要素、つまりリスト2（1）の要素を表すCSSセレクター「#tab-panel」を指定してwijmo.nav.TabPanelのコンストラクターを実行すると、その要素がタブパネルとして表示されるようになります。
const tabPanel = new wijmo.nav.TabPanel('#tab-panel');
今回タブパネルに表示するのは、項目別のチャートです。そこで、従来1つしかなかったチャートの処理を増やして、リスト4の通り5つのチャートを表示するようにします。
// 気温のチャート ...（1）
const chart1 = new wijmo.chart.FlexChart('#chart1', {
header: '北海道',
chartType: wijmo.chart.ChartType.Line, // ...（1a）
axisX: {
format: 'MM/dd'
},
bindingX: 'date',
series: [ // ...（1b）
{ binding: 'maxTemperature', name: '最高気温' },
{ binding: 'minTemperature', name: '最低気温' }
],
legend: { // ...（1c）
orientation: wijmo.chart.Orientation.Horizontal,
position: wijmo.chart.Position.Bottom
}
});
// 降水量のチャート ...（2）
const chart2 = new wijmo.chart.FlexChart('#chart2', {
header: '北海道',
chartType: wijmo.chart.ChartType.Column, // ...（2a）
axisX: {
format: 'MM/dd'
},
bindingX: 'date',
series: [ // ...（2b）
{ binding: 'precipitation', name: '降水量' }
],
legend: { // ...（2c）
orientation: wijmo.chart.Orientation.Horizontal,
position: wijmo.chart.Position.Bottom
}
});
（以下略 chart3：日照時間、chart4：風速、chart5：湿度）
（1）が気温を表示する（従来の）チャート、（2）は今回追加した降水量のチャートを表示する処理です。以下類似の実装で、日照時間、風速、湿度の各チャートを表示する処理を記述していきます。
チャートの種類は（1a）（2a）のchartType属性に指定します。今回はチャートごとに表3のchartTypeを指定しました。Wijmoで利用できるすべてのチャート種類は、公式のドキュメントや実際に動作を試せるデモサイトを参照してください。
| No. | チャート | chartType |
チャートの種類 |
|---|---|---|---|
| 1 | chart1（気温） | wijmo.chart.ChartType.Line | 折れ線 |
| 2 | chart2（降水量） | wijmo.chart.ChartType.Column | 縦棒 |
| 3 | chart3（日照時間） | wijmo.chart.ChartType.Area | 折れ線（線の下を塗りつぶして表示） |
| 4 | chart4（風速） | wijmo.chart.ChartType.LineSymbols | 折れ線（データ点にシンボルを表示） |
| 5 | chart5（湿度） | wijmo.chart.ChartType.Spline | 折れ線（曲線で表示） |
チャートに表示するデータは、各チャート（1b）（2b）のseries配列で指定します。データの項目名（表1参照）をbinding属性に、データの名前をname属性に指定します。また、（1c）（2c）のlegendは表の凡例に関する設定で、ここではorientation属性に凡例の方向をwijmo.chart.Orientation.Horizontal（＝横並び）、position属性に凡例の表示位置をwijmo.chart.Position.Bottom（＝チャートの下）と指定しています。凡例で指定できるすべてのパラメーターは、Wijmoの公式ドキュメントに記載されています。
