Highcharts -需要高级工具提示功能

Highcharts - advanced tooltip functionality needed

本文关键字：工具提示 功能 高级 Highcharts      更新时间：2023-09-26

我在使用堆叠法线的面积图进行绘图时遇到了一个问题。我在这里问的最后一个问题是:Highcharts帮助-面积图叠加

基本上是问如何在不规范化数据的情况下绘制堆栈值。有人告诉我，我可以从另一个序列中减去一个序列以使图形正确显示，然而，由于这种计算，当您悬停时的值是倾斜的。

的例子:: 

Series Total:      [0,0,0,1,1,2,3]
Series In-Service: [0,0,0,0,0,1,2]

所以我固定数据来绘制它:

Series Total:      [0,0,0,1,1,1,1]
Series In-Service: [0,0,0,0,0,1,2]

现在它的图形很好，但工具提示是错误的，例如最后一个数据点应该是:

Series Total:      3
Series In-Service: 2

但是它显示:

Series Total:      1
Series In-Service: 2

由于工具提示不能访问其他点，我们不能做一个固定计算来显示它。除非我使用shared: true，但我不能使用shared，因为工具提示太大了，因为我有所有的系列。

如果我不明白的地方请提问，我真的需要一些帮助。

在设置系列数据时使用对象列表。您可以向数据点对象添加其他选项，并从工具提示格式化程序访问它。

示例见http://jsfiddle.net/jgdreyes/JvSBk/

var seriesTotal = [
    {x: 0, y: 0, customTooltip: 0},
    {x: 1, y: 0, customTooltip: 0},
    {x: 2, y: 0, customTooltip: 0},
    {x: 3, y: 1, customTooltip: 1},
    {x: 4, y: 1, customTooltip: 1},
    {x: 5, y: 1, customTooltip: 2},
    {x: 6, y: 1, customTooltip: 3}
];
var chart = new Highcharts.Chart({
    series: [
        {data: seriesTotal}
    ],
    tooltip: {
        formatter: function() {
            //access customTooltip option
            return this.point.customTooltip;
        }
    },
});

虽然可能不是最佳的，但我在类似的情况下做了以下操作:

在我的配置中，我已经设置了工具提示格式化程序来使用点的名称。

tooltip: {
  formatter: function() {
    return this.point.name;
  }
}

当我添加点时，我简单地用我的自定义HTML设置名称，如…

// get x, y and other vars
series[0].addPoint({x: x, y: y, name: 'In Service: ' + inService }, false);
series[1].addPoint({x: x, y: y, name: 'Total: ' + total }, false);

当然，你会使用未经调整的值作为总数

相关文章：