Highcharts入門
--広告--
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
- 作者:Ethan Brown
- 発売日: 2017/01/20
- メディア: 単行本(ソフトカバー)
ライセンス取得
商用利用は有償。 Developer License : 535ドル / 96,700円〜
Non-Commercial License は、無料のライセンス。取得にはフォーム申請が必要。個人のサイト、学校のサイト、非営利団体、購入前の試用は利用可能。フォーム申請すると即時メールが返ってきてライセンス取得できる。Creative Commons Attribution-NonCommercial 3.0 が適用される。
ロード
参考:Installation | Highcharts.com
Highchartsのロード
<script src="https://code.highcharts.com/highcharts.js"></script>
Highcharts Stockのロード
Highcharts Stock(highstock.js)にはHighcharts(highcharts.js)が含まれているので、両方をロードする必要はない。
<script src="https://code.highcharts.com/stock/highstock.js"></script>
Highcharts Maps
highmaps.jsのロードは不要だが、highmaps.jsには完全なhighcharts.jsは含まれていない。
<script src="https://code.highcharts.com/stock/highmaps.js"></script>
同時利用
同じページでhighcharts.jsと他のライブラリも必要な場合は、モジュールとしてロードする。
<script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> <script src="https://code.highcharts.com/maps/modules/map.js"></script>
最初のグラフ
このグラフを作成してみよう。
ちなみに、Non-Commercial License なので右下にうっすらとHighchart.comと表示されている。
グラフの種類を選び値をセットしているだけだが、グラフにマウスを合わせると値を示したり、判例にマウスオーバーするとその人のグラフだけハイライトしたりもする。
divタグにidとサイズを指定。
<body> <div id="container" style="width:100%; height:400px;"></div> </body>
グラフの初期化。上記のdivタグはidのcontainerで参照し、Highchartsのコンストラクタ(初期化)で使われている。
<head> <script src="https://code.highcharts.com/highcharts.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { var myChart = Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); }); </script> </head>
テーマの入手と適用
好みに応じてテーマを設定することで見栄えを変えることができる。
grayテーマを適用してみよう。
テーマはCDNでは提供されていないようなので、ダウンロードして利用する。highcharts.jsロードの直後に設定する。
Non-Commercial Licenseの通知メールからダウンロードページに遷移して Highcharts-8.2.0.zip をダウンロード、解凍して入手するのが正しい入手経路ではないかと思うが、Githubのこちらのページからも入手可能。
<script src="https://code.highcharts.com/highcharts.js"></script> <script type="text/javascript" src="js/themes/gray.js"></script>
オプション設定
グラフ表示のオプションはJavaScriptオブジェクトを使用して、次のように書ける。renderToにdivタグはidのcontainerを指定している。
var options = { chart: { renderTo: 'container', type: 'bar' }, series: [{ name: 'Jane', data: [1, 0, 4] }] };
コンストラクタ Highcharts.Chart を呼び出し初期化するときに、オプションを設定する。
var chart = new Highcharts.Chart(options);
options作成後に設定の追加(メンバーの追加)をすることも可能。上記の例で作ったオブジェクトならば、options.series は配列なので、pushメソッドを持っている。
options.series.push({ name: 'John', data: [3, 4, 2] })
JavaScriptの便利なところは、ドット記法と角括弧記法が等価なので、すべてのメンバーに文字列名でアクセスできるところ。つまり、options.chart.renderTo と options['chart']['renderTo'] は等価となる。
グローバル・オプション
同じページのすべてのチャートにオプションのセットを適用したい場合は、以下のように Highcharts.setOptions を使用する。
Highcharts.setOptions({ chart: { backgroundColor: { linearGradient: [0, 0, 500, 500], stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)'] ] }, borderWidth: 2, plotBackgroundColor: 'rgba(255, 255, 255, .9)', plotShadow: true, plotBorderWidth: 1 } }); var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', }, xAxis: { type: 'datetime' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], pointStart: Date.UTC(2010, 0, 1), pointInterval: 3600 * 1000 // one hour }] }); var chart2 = new Highcharts.Chart({ chart: { renderTo: 'container2', type: 'column' }, xAxis: { type: 'datetime' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], pointStart: Date.UTC(2010, 0, 1), pointInterval: 3600 * 1000 // one hour }] });
Highchartsを理解する
Highchartsを理解するには、グラフのさまざまな部分と概念を理解することが重要となる。
以下にグラフの主な概念を説明する。
タイトル(title)とサブタイトル(subtitle)
参考:Title and subtitle / title / subtitle / setTitle
グラフは標準ではグラフの上部に表示され、オプションでその下にサブタイトルを表示することもできる。
var options = { title: { text: 'タイトル' }, subtitle: { text: 'サブタイトル' } }
align, float, margin, verticalAlignなどのオプションを指定することもできる。
var options = { title: { text: 'タイトル', algin: 'left' }, subtitle: { text: 'サブタイトル' algin: 'left' } }
また、後から動的に変更することも可能。
$('#color').click(function () { chart.setTitle( { style: { color: 'red' } }, { style: { color: 'green' } } ); });
シリーズ(Series)
参考:Series
シリーズは系、系列という意味、適切な訳がわからないのでシリーズとする。シリーズとは、1つのデータセットで、1つの折れ線グラフや1つの列を表す。グラフにプロットされたすべてのデータはシリーズを使用している。
データの表現方法(データ構造)には3つの方法がある。
1.配列
数値の配列。数値はYの値となる。Xの値は0から1ずつ増えていくか、pointStartオプションおよびpointIntervalオプションから自動計算される。もし軸にカテゴリーがあればそれが使われる。
data: [0, 5, 3, 5]
2.配列の配列
2つの値をもつ配列の配列。最初の値はXの値で、2つ目の値はYの値となる。最初の値が文字列の場合はポイントの名前として使用され、Xの値は1ずつ増えていくか、pointStartオプションおよびpointIntervalオプションから自動計算される。(arearangeなど一部のシリーズは3つ以上の値を持つ。)
data: [[5, 2], [6, 3], [8, 2]]
3.連想配列の配列
名前付き値の配列。これは、options.point で見たようなポイント設定オブジェクトとなる。name属性はグラフや凡例の上にカーソルを合わせると表示される。
Highcharts Stock でこのオプションを使用するには、ポイントの総数が turboThreshold を超えてはならない、または turboThreshold の設定を増やす必要がある。
data: [{ name: 'Point 1', color: '#00FF00', y: 0 }, { name: 'Point 2', color: '#FF00FF', y: 5 }]
ツールチップ(Tooltip)
参考:Tooltip
グラフ上のシリーズやポイントにカーソルを合わせると、チャートの特定の部分の値を説明するツールチップが表示される。
凡例(Legend)
参考:Legend
凡例は、定義されたシンボルとシリーズの名前をグラフに表示する。凡例にマウスを合わせるとシリーズを強調する。凡例をクリックすることでシリーズを有効にしたり無効にしたりできる。
軸(Axes)
参考:Axes
グラフのX軸とY軸は、異なるデータに対して複数の軸を用意することもできる。ほとんどのグラフは軸を持っているが、円グラフには軸がない。
ラベル(Labels)
軸のラベル(Axis labels)は、フォーマッタ機能を使用してカスタマイズすることもできる。
次の例では、y 軸ラベルの値を取り、その最後に % 記号を追加しています。
var options = { ... yAxis: { labels: { formatter: function() { return this.value + ' %'; } }, }, ...
グリッド線(Grid lines)
グリッド線は、グラフの値を読みやすくするために水平線および垂直線を表示する。標準では無効になっている。有効にするには、 gridLineWidth を設定する。
xAxis: { gridLineWidth: 1 }, yAxis: { gridLineWidth: 1 }
複数の軸(Multiple axes)
複数の軸を持つには、以下のように複数の軸を作成する必要がある。
最初のyAxisはインデックス0から始まることに注意。グラフの右側に置く軸には、opposite: true オプションを指定する。
yAxis: [{ //--- Primary yAxis title: { text: 'Temperature' } }, { //--- Secondary yAxis title: { text: 'Rainfall' }, opposite: true }], series: [{ yAxis: 0, data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },{ yAxis: 1, data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }]
軸のタイトル(Axis title)
軸のタイトル。標準ではY軸は表示、X軸は非表示となる。
軸のタイプ(Axis types)
軸は、直線、対数(log)、日付、カテゴリのいずれかになる。軸のタイプは次のように設定する。
// The types are 'linear', 'logarithmic' and 'datetime' yAxis: { type: 'linear', } // Categories are set by using an array xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }
日時(Datetime)
タイプが日時の軸は、適切な間隔で丸めた日にちが使われる。
便利な関数をいくつか紹介。
// Get time in millis for UTC Date.UTC(year,month,day,hours,minutes,seconds,millisec) // Get time in millis for your local time Date.parse("Month day, year"); // Built in Highcharts date formatter based on the [PHP strftime](https://php.net/manual/en/function.strftime.php) (see [API reference](https://api.highcharts.com/class-reference/Highcharts#.dateFormat) for usage) Highcharts.dateFormat("Month: %m Day: %d Year: %Y", 20, false);
ドリルダウン(Drill down)
参考:Drill down / Drill down Demo
Highcharts にはドリルダウン機能が組み込まれている。グラフをクリックするとグラフが詳細な内容に置き換えられることを示すアニメーションが動作する。Drill down Demo で動作を確認するとわかりやすい。シリーズを連結することで、複数レベルのドリルダウンを適用することもできる。
親となるシリーズはdrilldownオプションを指定することで drilldown.series とリンクさせる。子供となる drilldown.series ではidオプションで親を指定する。
series: [{ name: 'Things', colorByPoint: true, data: [{ name: 'Animals', y: 5, drilldown: 'animals' }, { name: 'Fruits', y: 2, drilldown: 'fruits' }, { name: 'Cars', y: 4, drilldown: 'cars' }] }], drilldown: { series: [{ id: 'animals', data: [ ['Cats', 4], ['Dogs', 2], ['Cows', 1], ['Sheep', 2], ['Pigs', 1] ] }, { id: 'fruits', data: [ ['Apples', 4], ['Oranges', 2] ] }, { id: 'cars', data: [ ['Toyota', 4], ['Opel', 2], ['Volkswagen', 2] ] }] }
非同期
多くの場合、ドリルダウンのデータを動的にロードしたいだろう。それには、drilldown オプションを true に設定し、chartのドリルダウン・イベントを使用してクリックされたらシリーズを読み込む。シリーズが読み込まれたら、Chart.addSeriesAsDrilldown メソッドを呼び出してデータを追加する。
// Create the chart Highcharts.chart('container', { chart: { type: 'column', events: { drilldown: function (e) { if (!e.seriesOptions) { var chart = this, drilldowns = { Animals: { name: 'Animals', data: [ ['Cows', 2], ['Sheep', 3] ] }, Fruits: { name: 'Fruits', data: [ ['Apples', 5], ['Oranges', 7], ['Bananas', 2] ] }, Cars: { name: 'Cars', data: [ ['Toyota', 1], ['Volkswagen', 2], ['Opel', 5] ] } }, series = drilldowns[e.point.name]; // Show the loading label chart.showLoading('Simulating Ajax ...'); setTimeout(function () { chart.hideLoading(); chart.addSeriesAsDrilldown(e.point, series); }, 1000); } } } }, title: { text: 'Async drilldown' }, xAxis: { type: 'category' }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true } } }, series: [{ name: 'Things', colorByPoint: true, data: [{ name: 'Animals', y: 5, drilldown: true }, { name: 'Fruits', y: 2, drilldown: true }, { name: 'Cars', y: 4, drilldown: true }] }], drilldown: { series: [] } });
参照
以上
--広告--
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
- 作者:Ethan Brown
- 発売日: 2017/01/20
- メディア: 単行本(ソフトカバー)