highcharts - 如何动态显示所有可见系列数据的总和

Question

如何在任何给定时间在 highchart 中显示所有可见系列数据的总和？例如给定这个图表:

https://jsfiddle.net/8xmw2nj6/2/

它显示了一个带有向下钻取功能的简单堆积柱形图。我想要的是默认情况下它应该显示“14879”值。当可见系列/深入变化时，它应该更新该值。例如，该值可以显示在图表标题中。

关于如何实现这一目标有什么想法吗？

为什么它很重要的示例: 显示 12 个月(给定年份)总销售额分割的柱形图。我们可以看到每月的销售额，但了解总数也很重要。仅突出显示特定客户的系列 - 同样，我们也想知道该系列的总值(value)，而不仅仅是每月的分割。

我知道我们可以使用 setTitle 设置图表的标题:

chart.setTitle(total);

但我不知道在哪里包含此功能以及如何计算仅可见系列的总数。

Answer 1

您可以通过使用 setTitle 函数和 render 事件来实现您想要的效果，如下所示:

chart: {
  events: {
    render: function() {
      let series = this.series
      let sum = 0
      for(let i = 0; i < series.length; i++) {
        if(series[i].visible){
          for(let j = 0; j < series[i].data.length; j++) {
            sum += series[i].data[j].y
          }
        }
      }
    this.setTitle({text: "Production Orders, sum: " + sum}, false, false) 
    }
  }
},

这将始终计算所有可见系列的总和。

要格式化标题中的数字，您可以使用Highcharts.numberFormat(number,decimals [,decimalPoint] [,thousandSep])，它返回格式化的数字作为字符串而不是整数求和。

工作示例: https://jsfiddle.net/ewolden/y03qjbhk/1/

渲染事件 API: https://api.highcharts.com/highcharts/chart.events.render