向Highchart工具提示添加新数据

Question

可能重复：
在highcharts系列中设置附加数据 所以我有这个图表：http://jsfiddle.net/Gg3ZL/ 我想用另一个来源的新数据替换当前工具提示中的“在线总玩家数”。

Array= ['PlayerX, PlayerY, PlayerZ', 'Player1, Player2, Player3'];  

等于第一系列数据输入中的第一个结果...

如果我不必替换“总在线玩家：”而只是在工具提示中添加另一个新条目，比如“在线玩家：”，那就更好了。

基本上，将鼠标悬停在一个条目上，查看在那个特定时间在线的玩家。

感谢任何帮助。

- NestedCodeblocksFTW

---

你想在工具提示中展示所有N个玩家的名称。如果有50个名称怎么办？工具提示的尺寸会更大。 - Hardik Mishra

是的，还有那个，更不用说随着时间推移所有数据的数量了...但那部分不会公开查看，结果选择会更小。至于工具提示大小，我会使用较小的字体。 - NestedCodeblocksFTW

@HardikMishra 是的，工具提示可能会变得很臃肿，但我认为现在highcharts允许完全HTML化的工具提示，因此您可以拥有像滚动条之类的东西，附注：我自己还没有尝试过。 - Jugal Thakkar

@HardikMishra 哒哒哒.... http://jsfiddle.net/jugal/WqAuE/ :) - Jugal Thakkar

缩放只是其中一种方法，使用CSS和JavaScript可以实现更好的可视化效果，如分页等，如果显示球员列表是必须的用例。 - Jugal Thakkar

Answer 1

你可以按照以下方式将附加数据与series.data中的每个点关联。

series: [{
    name: 'Series 1',
    data: [{
        y: 2,
        players: ['a', 'b']},
    {
        y: 3,
        players: ['a', 'b', 'c']},
    {
        y: 2,
        players: ['x', 'y']},
    {
        y: 4,
        players: ['a', 'b', 'c', 'd']}
    ]
}]

现在在 tooltip.formatter 中，您可以按如下方式使用额外的数据：

formatter: function() {
    var result = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
    $.each(this.points, function(i, datum) {
        result += '<br />' + datum.y + ' players online';
        $.each(datum.point.players, function() {
            result += '<br/>' + this;
        });
    });
    return result;
}

复杂提示框 | Highchart & Highstock @ jsFiddle

- Jugal Thakkar