<Highcharts> Tooltipに要素追加
Tooltip
にいろいろ要素を追加する方法。
JSON
配列を用意しておいてindexOf
でサーチをかけて、その要素をformatter
で表示する。
<html> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script> <script src="http://code.highcharts.com/stock/highstock.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script src="https://rawgithub.com/laff/technical-indicators/master/technical-indicators.src.js"></script> <script> var chart; var options; var data_xy = [[1464678060000.0, 1], [1464678720000.0, 2], [1464679380000.0, 3], [1464688020000.0, 5], [1464689280000.0, 1]]; var data_x = [1464678060000.0, 1464678720000.0, 1464679380000.0, 1464688020000.0, 1464689280000.0]; var data_5 = ['Taro', 'Jiro', 'Sabro', 'Shiro', 'Goro']; $(function(){ options = { chart: { renderTo: "container", type: 'line', zoomType: 'xy' }, title: { text: "5 shining stars" }, xAxis: { type: 'datetime' }, tooltip: { formatter: function(){ var index = data_x.indexOf(this.x); var guy = data_5[index]; var s = '<b>x =' + this.x + '</b><br>'; s += '<b>date(x) = ' + Highcharts.dateFormat('%e - %b - %Y', this.x) + '</b><br>'; s += '<b>y = ' + this.y + '</b><br>'; s += '<b>index = ' + index + '</b><br>'; s += '<b>guy =' + guy + '</b><br>'; return s; } }, rangeSelector: { selected: 1 }, legend: { enabled: true, layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, plotOptions: { series: { marker: { enabled: false } } }, series: [{ name: "Hages", data: data_xy, marker: { enabled: true, radius: 2 } }] }; var chart = new Highcharts.StockChart(options); }); </script> <body> <div id="container" style="width:1000px; height:500px;"></div> </body> </html>
時間datetime
のフォーマットの仕方。