Highcharts：是不是可以在工具提示格式化程序中将系列与外部变量进行比较？

Posted 2023-02-25

【中文标题】Highcharts：是不是可以在工具提示格式化程序中将系列与外部变量进行比较？

【英文标题】：Highcharts: Is it possible to compare series with external variable in tooltip formatter?Highcharts：是否可以在工具提示格式化程序中将系列与外部变量进行比较？

【发布时间】：2013-04-04 03:41:01

【问题描述】：

我想将一个系列与一个 x 轴相同但 y 值不同的外部变量进行比较。为了更容易解释问题，提供了一个示例代码here。

数据系列是

series: [data: [5, 4, 5, 7, 8, 6, 3, 6, 7, 4, 8, 9],
   data: [4, 6, 7, 9, 5, 9, 12, 11, 9, 7, 6, 5]]

而外部变量是

var extdata = [2,2,2,1,0,0,0,1,1,2,2,2];

它们共享相同的 x 轴（在本例中为一月、二月、...、十二月）。假设我想在该月的系列中的数据点加上外部变量中的相应条目至少为 10 时显示工具提示“最大值”，但否则保留总和的数值，以便三月的工具提示显示

March:
Series 1: 7
Series 2: 9

四月的时候是这样的

April:
Series 1: 8
Series 2: Max

是否可以仅使用工具提示格式化程序来执行此操作？如果不是，如何实现？谢谢！

【参考方案1】：

有几种方法可以做到这一点，但我能想到的最简单的方法是像这样格式化您的 extdata：

var extdata = 'Jan':2,
           'Feb':2,
           'Mar':2,
           'Apr':1,
           'May':0,
           'Jun':0,
           'July':0,
           'Aug':1,
           'Sep':1,
           'Oct':2,
           'Nov':2,
           'Dec':2;

然后在你的 tooltip 函数中，你可以这样引用它：

formatter: function () 
        var s = '<b>' + this.x + '</b>';
        var month = this.x;
            $.each(this.points, function (i, point) 
                var total = point.y + extdata[month];
                s += '<br/>' + point.series.name + ': ' + (total>=10?'max':point.y);
            );
        return s;
    ,

http://jsfiddle.net/3uhge/

通过索引当月的 extdata，您可以避免计算出您将鼠标悬停在哪个点上。如果需要，您可以通过遍历类别来查找月份名称来解决此问题。

【讨论】：

谢谢。虽然我的实际数据有更多的点，但我最终还是在寻找索引，这比更改外部变量的结构更容易。是否可以在不使用 x 轴变量找到匹配项的情况下检索索引？如果可能的话，我可以进一步简化我的代码并节省一些计算能力。

【参考方案2】：

对于分类，SteveP 的回答非常好。但是，如果您不想格式化数据，请使用以下内容：

s+= '<br/>Ext data: ' + extdata[this.points[0].point.x]; 

其中this.points[0].point.x 等于外部数据索引的索引。 jsFiddle

但是，如果您的 xAxis 未分类，您可以简单地通过 this.x 获取索引，如上一个答案 jsFiddle

【讨论】：

谢谢 - 这也有效。但我的实际数据实际上是一个二维数组，第一个维度是 x 轴值，因此this.points[0].point.x 将返回 x 值而不是整数索引。我想知道是否有办法找到索引。

不幸的是没有像'index'这样的属性。您可以使用inArray() JS 内置函数，您可以在其中找到 x 值列表：this.points[0].series.xData。