くずきのblog

技術とか色々

HighCharts(React)でグラフをHoverした際に画像を表示する

どうも、くずきです。
以前HighChartsと呼ばれる、JSでのグラフ系ライブラリでかなり人気っぽさそうなやつを使った。
綺麗だし、簡単だしと良いところ盛りだくさんなライブラリだけど、商用利用の場合は有料のため注意。

Reactで利用するために以下のライブラリを利用。

github.com

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: '折れ線グラフ',
}
]

eventsclick項目に関数をしていすれば簡単に実装できる。

参考になりそうなサイト

grgrjnjn.blogspot.jp

qiita.com