Skip to content

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

by : 2017/04/18

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

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

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

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

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

グラフを表示する

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

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

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

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

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

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

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

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


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

banner_02

From → hifive

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。