Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。今回の目標:表とチャートを表示ここまでで生成したプロジェクトをもとに、今回は図3のうち大きな割合を占める表とチャートを実装します。今回の作業を行うと、図7のWebページが完成します。今回実装するWebページ(p001-wijmo)表とチャートを表示する下準備まずindex.htmlの<body>内に、表とチャートを表示するリスト3の記述を追加します。</div></div>ここでindex.cssファイルにはリスト4の通り記述します。(1)はCSSのFlexboxを利用して表とチャートを横並びにする指定、(2)は表とチャートの幅と余白の指定、(3)(4)は表とチャートの高さの指定です。500px;}Wijmoの実装を行うJavaScriptファイルindex.jsの冒頭にリスト5の記述を行って、Wijmoのライセンスキーを設定します。ライセンスキーを設定しないとWijmoはトライアル版として動作し、その旨がWebページに表示されます。表(FlexGrid)を表示する処理の実装はリスト6の通りです。],});グリッドを表示する要素のCSSセレクター「#grid1」(idが「grid1」の要素に対応)を第1引数に指定してwijmo.grid.FlexGridクラスのコンストラクターを実行すると、FlexGridを表示できます。第2引数はグリッドのオプションで、指定内容は表の通りです。(表4参照)columnsの配列には、表示する列の定義を指定するJavaScriptオブジェクトを、列の数だけ記述します。設定するJavaScriptの属性は表4の通りです。列の表示形式(「F1」は小数第1位まで表示の意味)データのグラフをチャート(FlexChart)で実装チャート(FlexChart)を表示する処理の実装はリスト7の通りです。],});FlexGrid同様、CSSセレクター「#chart1」を第1引数に指定してwijmo.grid.FlexChartクラスのコンストラクターを実行します。第2引数に指定するオプションは表5の通りです。(表6参照)ここでseriesはチャートに表示する系列(グラフそれぞれの線に対応)のオプションを指定するJavaScriptオブジェクトの配列で、設定するJavaScriptの属性は表6の通りです。チャートに表示される系列の名前データを取得して表やチャートに設定データを取得して表やチャートに表示する処理は、リスト8の通り実装します。});}(1)のfetchメソッドでデータファイルdata/data.csvを取得します。取得したデータはres.text()で文字列として解釈した後、(2)でcsv_parse.parseメソッドを利用してCSV文字列を解析します。このメソッドは図6で導入したnode-csvライブラリが提供するもので、第1引数に文字列、第2引数にオプションを指定すると、CSV文字列をJavaScriptオブジェクトの配列に変換します。ここで指定しているオプションは表7の通りです。利用できるすべてのオプションはnode-csvの公式ドキュメントにリストされています。true(解釈する)解析して得られたデータ変数recordを、(3)でgrid1(FlexGrid)とchart1(FlexChart)のitemsSourceプロパティに設定すると、recordのデータが表とチャートに描画されます。以上のfetchAndApplyメソッドをWebページ読み込み時に実行して、データ取得~表示の処理を行います。リスト8(1)で取得するdata/data.csvは、気象庁の「過去の気象データ・ダウンロード」から、2022年10月の札幌の最高気温と最低気温データをダウンロード後、図8の状態に加工したものです。Webページに表示するデータのCSV(p001-wijmo/data/data.csv)FlexGridやFlexChartでは、binding属性(FlexGridでは表4のNo.1、FlexChartでは表6のNo.1)に指定されたデータ項目名と、データのヘッダーに付与された「date」「maxTemperature」「minTemperature」の指定を紐づけて、表やチャートを描画します。まとめ本連載では、全4回にわたり、Wijmoが提供するUI部品を複数組み合わせて本格的なWebページを作成します。初回となる今回は、CSVファイルから取得したデータをグリッド(FlexGrid)とチャート(FlexChart)に表示しました。今回表示したのは最低気温と最高気温のみでしたが、次回は表示項目を増やしていきます。表示項目を増やしただけではチャートの表示が煩雑になるので、各項目を複数のチャートに分けて表示して、タブパネルで切替表示できるように改造します。