Question

假设我有两个系列的情节，一个是OHLC和Line。我想自定义工具提示，例如我不想显示时间戳，OHLC系列的开放和高值工具提示和我想在线序列工具提示中添加一些自定义消息。

如何在Highchart中实现自定义工具提示？

$(function () {

// create the chart
$('#container').highcharts('StockChart', {

    rangeSelector: {
        selected: 2
    },

    title: {
        text: 'AAPL Stock Price'
    },

    series: [{
        type: 'ohlc',
        data: [
            [1147996800000, 63.26, 64.88, 62.82, 64.51],
            [1148256000000, 63.87, 63.99, 62.77, 63.38],
            [1148342400000, 64.86, 65.19, 63.00, 63.15],
            [1148428800000, 62.99, 63.65, 61.56, 63.34],
            [1148515200000, 64.26, 64.45, 63.29, 64.33],
            [1148601600000, 64.31, 64.56, 63.14, 63.55],
            [1148947200000, 63.29, 63.30, 61.22, 61.22],
            [1149033600000, 61.76, 61.79, 58.69, 59.77]
        ]
    }, {
        type: 'line',
        data: [
            [1147996800000, 63.26],
            [1148256000000, 63.87],
            [1148342400000, 64.86],
            [1148428800000, 62.99],
            [1148515200000, 64.26],
            [1148601600000, 64.31],
            [1148947200000, 63.29],
            [1149033600000, 61.76]
        ]
    }]

});

}）;

Answer 1

您可以使用工具提示块中的格式化程序功能控制工具提示的格式。例如：

 tooltip: {
        formatter: function () {
            var s = '<b>' + this.x + '</b>';

            $.each(this.points, function (i, point) {
                s += '<br/>' + point.series.name + ': ' + point.y;
            });

            return s;
        },
        shared: true
    },

这使用x值的标题格式化工具提示，并列出每个系列的系列名称和y。 shared：true表示工具提示在两个系列之间共享，无论您将鼠标悬停在哪个系列上，都会显示相同的工具提示。

工具提示上有大量文档以及一些示例： http://api.highcharts.com/highcharts#tooltip.formatter

也在这里：

http://api.highcharts.com/highstock#tooltip.formatter

当情节有两个系列时，如何定制工具提示

1 个答案: