Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。表示されていましたが、今回追加したデータ項目もまとめて表示するため、リスト5(1)のcolumns配列にデータ項目を追加します。データの項目名(表1参照)をbinding属性に、ヘッダーに表示するデータ名をheader属性に指定します。allowSortingはその項目での並び替えを許可するか(ここでは許可しない)、formatは値の表示フォーマット(ここではF1=小数第1位まで表示)を指定します。表やチャートに表示するデータ(図6のdata.csv)を取得する処理をリスト6に示します。処理内容は前回記事と同一ですが、取得したデータの変数recordsは、(1)の通り、今回設定した5つのチャート(chart1~chart5)と表(grid1)それぞれのitemsSourceプロパティに設定するようにします。});}スタイルシートでレイアウトを微調整タブパネルのほか、表のデータ項目やチャートの数が増えたのに対応して、スタイルシートindex.cssをリスト7の通り調整します。表とチャートを横方向に半分ずつ表示するため、(1)のwidthに50%を設定します。複数のチャートそれぞれに高さを調整する必要があるため、(2)のchartクラスを各チャートに付与して、高さを500pxに設定しました。500px;}図3の状態をベースに以上の改造を行うと、タブパネルで複数のチャートを切り替え表示する図4のWebページが実装できます。まとめ本連載では、全4回にわたり、Wijmoが提供するUI部品を複数組み合わせて本格的なWebページを作成します。第2回となる今回は、タブパネルを利用して、複数種類のチャートを切替表示できるようにしました。今回の改造で表示されるデータ項目が増えたとはいえ、これらはすべて北海道のデータでした、次回はWebページに図22のドロップダウンを加えて、リストからの選択や部分一致検索で都道府県を指定して、対応するデータを表やチャートに表示するよう実装していきます。