JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用！～複数チャートをタブパネルで切り替え表示～

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用 第2回

タブパネルによる切り替え表示を実装（3）

index.jsにおけるFlexGridの実装

　これまで表（FlexGrid）には、日時、最高気温、最低気温だけが表示されていましたが、今回追加したデータ項目もまとめて表示するため、リスト5（1）のcolumns配列にデータ項目を追加します。データの項目名（表1参照）をbinding属性に、ヘッダーに表示するデータ名をheader属性に指定します。allowSortingはその項目での並び替えを許可するか（ここでは許可しない）、formatは値の表示フォーマット（ここではF1=小数第1位まで表示）を指定します。

［リスト5］表（FlexGrid）を表示するJavaScriptの実装（p001-wijmo/index.js）

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プロパティに設定するようにします。

［リスト6］表やチャートに表示するデータを取得する処理（p001-wijmo/index.js）

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に設定しました。

［リスト7］スタイルシートの調整（p001-wijmo/index.css）

#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②のドロップダウンを加えて、リストからの選択や部分一致検索で都道府県を指定して、対応するデータを表やチャートに表示するよう実装していきます。

参考資料

• Wijmo
• グレープシティ