webページでHighchartsを利用してグラフを描く

こんにちは、洪です。

今日はjsのグラフライブラリのHighchartsについて紹介します。

Highchartsを利用すると簡単に綺麗なグラフを描くことが出来ます。
グラフ描画時に、プラグインをインストールする必要はありません。
PC、モバイルのほとんどのブラウザで動作し、実行速度も速く簡単に利用することができます。
商用目的で利用する場合はライセンスが必要です。

Highchartsの公式 demoサイトを見ると描画できるグラフはたくさんの種類があります。

Highchartsの Basic line チャートを例に、商品A~商品Eの2018年度の月別売上のグラフを作成してみます。

1.htmlを作成

htmlを作成し、Highchartsをimportする。

importしたHighchartsは現時点での最新バージョン(v7.1.2)です。

2.グラフ表示用のJSONデータの属性作成

※属性の説明について、api説明書を参照してください。

2-1.グラフのタイトルを設定

2-2.横軸の表題を設定

2-3.縦軸を設定

2-4.ツールチップを設定

商品の月をクリックすると、ツールチップで売上金を表示します。

2-5.商品のチャート位置を配置

2-6.商品の各月の売上金データを作成

3.レスポンシブを設定

4.完成したHTML

5.実行確認

htmlを実行すると以下のようなグラフが表示されます。

マウスのカーソルを各商品の月に移動すると、ツールチップで明細が表示されます。

商品A、Bのみのグラフを見たい場合、チャート位置の右側にある商品C、D、Eをクリックすると商品A,Bのみ表示します。


非表示になった商品を再表示する場合、チャート位置の右側にある商品をもう一度クリックすれば表示されます。

Highchartsは3Dグラフ、動的グラフ、エリアチャート、散布図などを表示する場合は非常に便利です。
用途にあわせてたくさんのグラフを選べるのでぜひご活用ください。

Comments are closed, but you can leave a trackback: Trackback URL.