高图表:显示错误值的堆积区域工具提示

Highcharts: Stacked area tooltip showing wrong value

本文关键字：区域 工具提示 显示 错误 高图表      更新时间：2023-09-26

我在高图表中使用面积图。我需要堆叠面积图和工具提示不得共享。

请参考这里的小提琴：jsfiddle.net/xqk6etzd/

问题是：当我将鼠标悬停在 S2 上时（在 S1 的所有点均为 0 之后），它会在工具提示中显示 S1 值而不是 S2。您可以尝试隐藏 S3 以便更好地进行测试。

同样，工具提示

不得共享，所以我在工具提示选项中设置了 shared：false。

在高图表中是否有这样的错误？还是我的代码中存在一些问题？

请帮忙。

堆叠设置为正常，这意味着一个面积图位于另一个面积图之上。行为正确：

plotOptions: {
  area: {
    stacking: 'normal'
  },

但是，如果你真的需要改变它，你可以检查实际面积的值，如果它等于零，只需将其与下一个值（jsfiddle）交换：

tooltip: {
  shared: false,
  formatter: function() {
    if (this.y == 0) {
      return this.series.chart.series[1].name + ': ' +this.series.chart.series[1].yData[this.x];
    } else
      return this.series.name + ': ' +this.y;
  }
},

检查 jsfiddle 示例：

 $(function() {
  $('#container').highcharts({
    chart: {
      type: 'area'
    },
    tooltip: {
      shared: false,
      formatter: function() {
        if ((this.y == 0)&&(this.series.name==this.series.chart.series[0].name)) {
        debugger;
          return '<b>'+ this.series.chart.series[1].name +'</b>:'  +this.series.chart.series[1].yData[this.x];
        } else
          return '<b>'+ this.series.name +'</b>:'  +this.y;
      }
    },
    plotOptions: {
      area: {
        stacking: 'normal'
      },
      series: {
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              alert("column index: " + this.series.columnIndex);
            }
          }
        }
      }
    },
    series: [{
      index: 1,
      "name": "S1",
      "data": [619, 406, 300, 41, 174, 10, 235, 495, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    }, {
      index: 2,
      "name": "S2",
      "data": [507, 90, 752, 548, 133, 528, 151, 553, 734, 341, 774, 810, 618, 89, 125, 202, 354, 317, 239, 82, 112, 155, 849, 258, 848]
    }, {
      index: 3,
      "name": "S3",
      "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 593, 110, 705, 569, 793, 437, 173, 300, 618, 693, 138, 38, 106, 525, 142, 807]
    }]
  });
});
相关文章：