タブパネルによる切り替え表示を実装（3）
index.jsにおけるFlexGridの実装
これまで表（FlexGrid）には、日時、最高気温、最低気温だけが表示されていましたが、今回追加したデータ項目もまとめて表示するため、リスト5（1）のcolumns配列にデータ項目を追加します。データの項目名（表1参照）をbinding属性に、ヘッダーに表示するデータ名をheader属性に指定します。allowSortingはその項目での並び替えを許可するか（ここでは許可しない）、formatは値の表示フォーマット（ここではF1=小数第1位まで表示）を指定します。
const grid1 = new wijmo.grid.FlexGrid('#grid1', {
autoGenerateColumns: false,
isReadOnly: true,
columns: [ // ...（1）
{ binding: 'date', header: '日時', allowSorting: false },
{ binding: 'maxTemperature', header: '最高気温', allowSorting: false, format: 'F1' },
{ binding: 'minTemperature', header: '最低気温', allowSorting: false, format: 'F1' },
{ binding: 'precipitation', header: '降水量', allowSorting: false, format: 'F1' },
{ binding: 'sunshineHours', header: '日照時間', allowSorting: false, format: 'F1' },
{ binding: 'windSpeed', header: '風速', allowSorting: false, format: 'F1' },
{ binding: 'humidity', header: '湿度', allowSorting: false, format: 'F1' }
]
});
表やチャートに表示するデータを取得する処理
表やチャートに表示するデータ（図6のdata.csv）を取得する処理をリスト6に示します。処理内容は前回記事と同一ですが、取得したデータの変数recordsは、（1）の通り、今回設定した5つのチャート（chart1～chart5）と表（grid1）それぞれのitemsSourceプロパティに設定するようにします。
function fetchAndApply() {
// CSVファイルを読み込み
fetch('data/data.csv')
.then(res => res.text())
.then(text => {
// CSVファイルを解析
csv_parse.parse(text, {
columns: true,
cast: true,
cast_date: true
}, (err, records) => {
// 解析したデータをFlexGridとFlexChartのitemsSourceに設定 ...（1）
grid1.itemsSource =
chart1.itemsSource =
chart2.itemsSource =
chart3.itemsSource =
chart4.itemsSource =
chart5.itemsSource = records;
})
});
}
スタイルシートでレイアウトを微調整
タブパネルのほか、表のデータ項目やチャートの数が増えたのに対応して、スタイルシートindex.cssをリスト7の通り調整します。表とチャートを横方向に半分ずつ表示するため、（1）のwidthに50%を設定します。また、複数のチャートそれぞれに高さを調整する必要があるため、（2）のchartクラスを各チャートに付与して、高さを500pxに設定しました。
#horizontal-container {
display: flex;
flex-direction: row;
}
#grid-container,
#chart-container {
width: 50%; /* （1） */
padding: 10px;
}
#grid1 {
height: 550px;
}
.chart { /* （2） */
height: 500px;
}
図3の状態をベースに以上の改造を行うと、タブパネルで複数のチャートを切り替え表示する図4のWebページが実装できます。
まとめ
本連載では、全4回にわたり、Wijmoが提供するUI部品を複数組み合わせて本格的なWebページを作成します。第2回となる今回は、タブパネルを利用して、複数種類のチャートを切替表示できるようにしました。
今回の改造で表示されるデータ項目が増えたとはいえ、これらはすべて北海道のデータでした、次回はWebページに図2②のドロップダウンを加えて、リストからの選択や部分一致検索で都道府県を指定して、対応するデータを表やチャートに表示するよう実装していきます。
