Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

注目JavaScriptライブラリReactで「Wijmo(ウィジモ) 5」を使いこなす

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第14回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

グリッド部品FlexGridとチャート部品FlexChartを試す

 WijmoのFlexGridはExcelのようなグリッドを表示する部品、FlexChartはさまざまなチャートを表示する部品です。これらの利用例を、図3のサンプルで説明します。グリッドの内容を変更すると、連動してチャートに反映されます。

図3 FlexGridとFlexChartを組み合わせたサンプル(p003-chart-grid)
図3 FlexGridとFlexChartを組み合わせたサンプル(p003-chart-grid)

 まず、利用するWijmoのモジュールを、リスト5の通りインポートします。(1)はFlexGrid、(2)はFlexChartに対応します。(3)はWijmo本体のモジュールで、FlexGridやFlexChartに表示するデータを管理するCollectionViewクラスが含まれます。

[リスト5]図3のサンプルでインポートするモジュール(p003-chart-grid/src/App.js)
import * as wjGrid from 'wijmo/wijmo.react.grid'; // FlexGrid ...(1)
import * as wjChart from 'wijmo/wijmo.react.chart'; // FlexChart ...(2)
import * as wj from 'wijmo/wijmo'; // Wijmo本体(CollectionView) ...(3)

 Appクラスのコンストラクターでは、FlexGridとFlexChartで共有するデータをstateに設定します。ここでは、ym(年月)/time(稼働時間)/count(生産数)のデータを持つJavaScriptオブジェクトの配列をコンストラクターに与えてCollectionViewを生成し、cvDataとしてstateに設定します。

[リスト6]this.stateにデータを設定する実装(p003-chart-grid/src/App.js)
this.state = {
  cvData: new wj.CollectionView([
    {
      'ym': '2018/9',
      'time': 160,
      'count': 200
    },
(略)
  ])
};

 renderメソッドで、画面に表示するFlexGridとFlexChartを記述します。FlexGridの記述はリスト7です。

[リスト7]FlexGridの記述(p003-chart-grid/src/App.js)
<wjGrid.FlexGrid itemsSource={this.state.cvData}> ...(1)
  <wjGrid.FlexGridColumn header="年月" binding="ym" width="*"/> ...(2)
  <wjGrid.FlexGridColumn header="稼働時間" binding="time" width="*"/> ...(3)
  <wjGrid.FlexGridColumn header="生産数" binding="count" width="*"/> ...(4)
</wjGrid.FlexGrid>

 (1)のFlexGridタグがグリッドの本体で、表示するデータ(this.state.cvData)をitemsSource属性に設定します。(2)~(4)のFlexGridColumnタグはグリッドの列で、binding属性でym(年月)、time(稼働時間)、count(生産数)をそれぞれ表示するようにします。「width="*"」は、列を可能な限り広げて表示する設定です。

 FlexChartはリスト8の通り記述します。

[リスト8]FlexChartの記述(p003-chart-grid/src/App.js)
<wjChart.FlexChart itemsSource={this.state.cvData} bindingX="ym"> ...(1)
  <wjChart.FlexChartSeries name="稼働時間" binding="time"/> ...(2)
  <wjChart.FlexChartSeries name="生産数" binding="count"
   chartType="LineSymbols"/> ...(3)
  <wjChart.FlexChartLegend position="Bottom"/> ...(4)
</wjChart.FlexChart>

 (1)のFlexChartタグがチャートの本体で、itemsSource属性にはリスト7同様に表示データを設定します。bindingX属性はチャートのx軸設定で、ここではym(年月)をx軸に設定します。(2)と(3)のFlexChartSeriesタグはグラフのデータ系列で、それぞれのbinding属性で(2)にtime(稼働時間)、(3)にcount(生産数)を表示するよう設定します。(3)ではグラフ種類を表すchartType属性にLineSymbols(線グラフ)を設定します。chartType属性を指定しない(2)のデータ系列は棒グラフになります。(4)のFlexChartLegendタグは凡例で、position属性で表示位置をBottom(下部)に設定します。

CollectionViewを利用したデータ同期と画面の更新

 リスト5~8のサンプル(p003-chart-grid)には、リスト3~4のサンプル(p002-basic)のように、画面更新時にstateを更新する実装がありませんが、FlexGridの変更がFlexChartに反映されます。これはCollectionViewの機能によるもので、CollectionViewを共有するWijmoコントロール間では、データが自動的に同期されて画面に反映されます。

 一方、Wijmoコントロール以外の画面要素とデータを共有する場合は、stateを更新して画面に反映するReactの方法に従う必要があります。このような実装方法を、FlexGridの内容をHTMLのtableタグで表示する図4のサンプルで説明します。

図4 FlexGridの内容をテーブルに表示するサンプル(p004-table-grid)
図4 FlexGridの内容をテーブルに表示するサンプル(p004-table-grid)

 FlexGridの記述はリスト7と同様です。データを表示するテーブルは、リスト9の通り記述します。(1)でCollectionView(this.state.cvData)のitemsプロパティでデータを取得して、mapメソッドで各行を<tr>タグ、<td>タグとして出力します。

[リスト9]テーブルの記述(p004-grid-table/src/App.js)
<table className="disp-table">
  <th>年月</th>
  <th>稼働時間</th>
  <th>生産数</th>
  {
    // CollectionViewのデータを出力 ...(1)
    this.state.cvData.items.map((value, index, array) => {
      return(
      <tr>
        <td>{value.ym}</td>
        <td>{value.time}</td>
        <td>{value.count}</td>
      </tr>)
    })
  }
</table>

 このままではCollectionViewの変更がテーブルに反映されないので、CollectionViewが変更されたときに発生するonCollectionChangedイベントの処理を、リスト10の通り実装します。this.setStateメソッドでCollectionViewを再設定すると、Reactの内部処理でテーブルが再描画されます。

[リスト10]CollectionViewが変更されたときの処理(p004-grid-table/src/App.js)
this.state.cvData.onCollectionChanged = (() => {
  this.setState({cvData: this.state.cvData});
});

[注]ライセンスの設定

 npmでインストールしたWijmoは正式版ですが、ライセンスキーを設定しないとトライアル版として動作し、画面上にトライアル版である旨が表示されます。公式ページの手順で取得したライセンスキーを、リスト11のようにsetLicenseKeyメソッドで設定すると、Wijmoが正式版として動作するようになり、トライアル版の表示が消えます。

[リスト11]ライセンスキーの設定方法
import * as wj from 'wijmo/wijmo';
wj.setLicenseKey('<ここにライセンスキーを設定>');

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmo 5を、Reactと組み合わせて利用する方法を説明しました。ReactプロジェクトにWijmoを組み込むことで、WijmoのコントロールをReactのコンポーネントとしてシームレスに活用できます。

参考資料



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5