<Highcharts> Tooltipに要素追加

highcharts

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のフォーマットの仕方。

stackoverflow.com