今回から何回かに分けてhifiveのチャートライブラリの使い方を紹介します。
まず今回はごく基本的な折れ線グラフを描いてみます。
サンプルはこちらにあります。結果は次のようなグラフになります。
チャートライブラリの読み込み
チャートを描く際には通常のhifiveに加えて、以下のライブラリを読み込みます。
グラフを表示する
まずHTMLは次のようになります。
次にJavaScriptの基本形です。 h5.ui.components.chart.ChartController を読み込みます。
続いて __ready の内容です。 series はダミーデータが入ります。配列で複数のデータを定義できます。
その後はチャートコントローラの初期定義になります。表示範囲、表示方法などを定義します。
ダミーデータを生成するメソッドです。系列データをオブジェクトで返します。
今回は折れ線グラフなので line としています。塗りつぶす場合には stacked_line が使えます（別途背景色も指定します）。線の色は青です。
ダミーデータを返している createChartDummyData には 400 と 100 という2つの引数が設定してあります。これは400を中心に±100（300〜500）のデータを生成します。生成されるデータは val というキーを持っています。
このようなデータ形式になっている必要があります。
今回のサンプルはこちらにあります。業務システムにおいてチャートはよく使われるものです。使い方を覚えてしまえばhifiveで簡単に描けるようになります。次回以降、このサンプルをベースに機能を追加説明していきます。
