どうも、くずきです。
以前HighCharts
と呼ばれる、JS
でのグラフ系ライブラリでかなり人気っぽさそうなやつを使った。
綺麗だし、簡単だしと良いところ盛りだくさんなライブラリだけど、商用利用の場合は有料のため注意。
React
で利用するために以下のライブラリを利用。
ReactHighstock
などがうまくインポートできなかったりする難点があるけど・・。
今回利用するバージョン
ライブラリ | バージョン |
---|---|
react | 15.6.1 |
react-highcharts | 13.0.0 |
tooltipでHover時に画像を表示する
HighCharts
はところどころでカスタマイズできるので良い。
Hover時の挙動はtooltip
の項目で変更可能です。
tooltip: { useHTML: true, formatter: function() { if(this.series.type === 'line') { return false; } return '<img src="' + this.series.userOptions.thumbnails[this.point.x] + '" width="200" height="200" />'; } }
何をしているかというと、棒(column)と折れ線(line)の複合グラフを想定していて、
折れ線グラフの際はfalse
を返すことで何もしません。
それ以外は、series
あるthumbnails
という配列の中身を表示させてます。(後述)
thumnails
じゃなくてもカスタムの名前でOK。
表示された画像をクリックすると遷移させる
厳密に言うと、グラフ自体をクリックしても遷移する。
こちらも、URLs
というカスタム項目の中に配列でいれておけばよい。
series: [{ type: 'column', name: '棒グラフ', yAxis: 1, point: { events: { click: function() { var url = this.series.userOptions.URLs[this.x]; if (url) window.open('http://'+url); } } }, URLs: ['url_1', 'url_2'...], thumbnails: ['thumbnails_url_1','thumbnails_url_2'...] }, { type: 'line', name: '折れ線グラフ', } ]
events
のclick
項目に関数をしていすれば簡単に実装できる。