チャートライブラリの使い方（1）「基本編」

今回から何回かに分けてhifiveのチャートライブラリの使い方を紹介します。

まず今回はごく基本的な折れ線グラフを描いてみます。

サンプルはこちらにあります。結果は次のようなグラフになります。

チャートライブラリの読み込み

チャートを描く際には通常のhifiveに加えて、以下のライブラリを読み込みます。

• graphic-renderer.js
• chart.js

グラフを表示する

まずHTMLは次のようになります。

次にJavaScriptの基本形です。 h5.ui.components.chart.ChartController を読み込みます。

続いて __ready の内容です。 series はダミーデータが入ります。配列で複数のデータを定義できます。

その後はチャートコントローラの初期定義になります。表示範囲、表示方法などを定義します。

ダミーデータを生成するメソッドです。系列データをオブジェクトで返します。

今回は折れ線グラフなので line としています。塗りつぶす場合には stacked_line が使えます（別途背景色も指定します）。線の色は青です。

ダミーデータを返している createChartDummyData には 400 と 100 という2つの引数が設定してあります。これは400を中心に±100（300〜500）のデータを生成します。生成されるデータは val というキーを持っています。

このようなデータ形式になっている必要があります。

今回のサンプルはこちらにあります。業務システムにおいてチャートはよく使われるものです。使い方を覚えてしまえばhifiveで簡単に描けるようになります。次回以降、このサンプルをベースに機能を追加説明していきます。