代码之家 › 专栏 › 技术社区 › å¤æåå ´

HighCharts:具有共享数据标签的共享工具提示(系列)

series title label highcharts

å¤æåå ´ · 技术社区 · 12 年前

我这里有一个简单的HighChart----> jsFiddle

通过拥有这样的系列赛:

series: [{
    name: 'Cities',
    data: [
        ["Paris", 29.9], 
        ["London", 71.5], 
        ["New York", 106.4]
    ]
},
{
    name: 'Universities',
    data: [
        ["Cambridge", 17.5], 
        ["Oxford", 1.5], 
        ["MIT", 16.4]
    ]
}
]

有一个共享的工具提示 (在单个框中显示两个系列信息的悬停工具提示) 只能显示系列的TOP NAME。相反

我想在TOOLTIP框中输入各自的城市名称和大学名称。

例如,它应该显示:

----------------------
| â¢ Paris: 29.9     |
| â¢ Cambridge: 17.5 |
----------------------

或者,至少应该显示:

------------------------------------
| â¢ Cities: 29.9 (Paris)           |
| â¢ Universities: 17.5 (Cambridge) |
------------------------------------

类似的事情。

(但现在它只显示了意甲名称)

请怎么做?

1 回复 | 直到 12 年前

Rob Schmuecker 12 年前

您可以使用 formatter 功能 tooltip 为此。

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

演示: http://jsfiddle.net/robschmuecker/qSfJw/2/

$(function () {
    $('#container').highcharts({
        tooltip: {
            shared: true,
            formatter: function () {
                console.log(this.points);
                return this.points[0].key + ' : ' + this.points[0].y + '<br/>' + this.points[1].key + ' : ' + this.points[1].y;
            }
        },
        series: [{
            name: 'Cities',
            data: [
                ["Paris", 29.9],
                ["London", 71.5],
                ["New York", 106.4]
            ]
        }, {
            name: 'Universities',
            data: [
                ["Cambridge", 17.5],
                ["Oxford", 1.5],
                ["MIT", 16.4]
            ]
        }]
    });
});

推荐文章