こんにちは、洪です。
今日はjsのグラフライブラリのHighchartsについて紹介します。
Highchartsを利用すると簡単に綺麗なグラフを描くことが出来ます。
グラフ描画時に、プラグインをインストールする必要はありません。
PC、モバイルのほとんどのブラウザで動作し、実行速度も速く簡単に利用することができます。
商用目的で利用する場合はライセンスが必要です。
Highchartsの公式 demoサイトを見ると描画できるグラフはたくさんの種類があります。
Highchartsの Basic line チャートを例に、商品A～商品Eの2018年度の月別売上のグラフを作成してみます。
1.htmlを作成
htmlを作成し、Highchartsをimportする。
importしたHighchartsは現時点での最新バージョン(v7.1.2)です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <meta charset="UTF-8" /> <title>Highchartsでグラフ作成</title> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 680px; height: 550px; margin: 0 auto"></div> <script language="JavaScript"> window.onload = function() { // ここは書くコードを次のステップで説明します。 } </script> </body> </html> |
2.グラフ表示用のJSONデータの属性作成
※属性の説明について、api説明書を参照してください。
2-1.グラフのタイトルを設定
|
1 2 3 |
title : { text: '商品A～商品Eの2018年度月間売上' } |
2-2.横軸の表題を設定
|
1 2 3 |
xAxis : { categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] } |
2-3.縦軸を設定
|
1 2 3 4 5 6 7 8 9 10 |
yAxis : { title: { text: '売上高 (万円)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] } |
2-4.ツールチップを設定
商品の月をクリックすると、ツールチップで売上金を表示します。
|
1 2 3 |
tooltip : { valueSuffix: '万円' } |
2-5.商品のチャート位置を配置
|
1 2 3 4 5 6 |
legend : { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 } |
2-6.商品の各月の売上金データを作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
series : [ { name: '商品A', data: [23.5, 32.2, 45.6, 20.3, 15.3, 56.4, 49.9, 53.5, 55.5, 33.2, 46.3, 43.2] }, { name: '商品B', data: [15.3, 18.2, 25.7, 23.1, 26.9, 27.4, 30.5, 38.6, 40.2, 48.3, 35.2, 25.4] }, { name: '商品C', data: [18.5, 22.5, 29.3, 37.1, 39.3, 45.8, 44.3, 48.2, 43.6, 40.3, 37.7, 33.0] }, { name: '商品D', data: [7.2, 6.3, 8.9, 10.2, 12.5, 16.2, 18.2, 17.3, 16.5, 12.8, 10.3, 13.9] }, { name: '商品E', data: [36.6, 37.2, 39.1, 30.2, 30.9, 28.3, 25.3, 24.8, 23.3, 20.7, 18.3, 19.7] } ] |
3.レスポンシブを設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
responsive: { rules: [{ condition: { maxWidth: 600 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } |
4.完成したHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<html> <head> <meta charset="UTF-8" /> <title>Highchartsでグラフ作成</title> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 680px; height: 550px; margin: 0 auto"></div> <script language="JavaScript"> window.onload = function() { Highcharts.chart('container', { // グラフ属性設定 // 各属性の詳細：https://api.highcharts.com/highcharts/ title : { text: '商品A～商品Eの2018年度月間売上' }, xAxis : { categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis : { title: { text: '売上高 (万円)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip : { valueSuffix: '万円' }, legend : { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series : [ { name: '商品A', data: [23.5, 32.2, 45.6, 20.3, 15.3, 56.4, 49.9, 53.5, 55.5, 33.2, 46.3, 43.2] }, { name: '商品B', data: [15.3, 18.2, 25.7, 23.1, 26.9, 27.4, 30.5, 38.6, 40.2, 48.3, 35.2, 25.4] }, { name: '商品C', data: [18.5, 22.5, 29.3, 37.1, 39.3, 45.8, 44.3, 48.2, 43.6, 40.3, 37.7, 33.0] }, { name: '商品D', data: [7.2, 6.3, 8.9, 10.2, 12.5, 16.2, 18.2, 17.3, 16.5, 12.8, 10.3, 13.9] }, { name: '商品E', data: [36.6, 37.2, 39.1, 30.2, 30.9, 28.3, 25.3, 24.8, 23.3, 20.7, 18.3, 19.7] } ], responsive: { rules: [{ condition: { maxWidth: 600 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); } </script> </body> </html> |
5.実行確認
htmlを実行すると以下のようなグラフが表示されます。
マウスのカーソルを各商品の月に移動すると、ツールチップで明細が表示されます。
商品A、Bのみのグラフを見たい場合、チャート位置の右側にある商品C、D、Eをクリックすると商品A,Bのみ表示します。
非表示になった商品を再表示する場合、チャート位置の右側にある商品をもう一度クリックすれば表示されます。
Highchartsは3Dグラフ、動的グラフ、エリアチャート、散布図などを表示する場合は非常に便利です。
用途にあわせてたくさんのグラフを選べるのでぜひご活用ください。
