Как динамически отображать сумму данных всех видимых серий

Question

Как я могу отобразить СУММ данных всех видимых серий на старшей диаграмме в любой момент времени?Например, для данного графика:

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

Он показывает простой столбец с накоплением столбцов с разверткой.Я хочу, чтобы по умолчанию показывалось значение 14879.По мере изменения видимой серии / детализации это значение должно обновляться.Это значение может быть показано, например, в заголовке графика.

Есть идеи, как этого добиться?

Пример того, почему это важно: График столбца, который показывает разбивку по продажам за 12 месяцев (в данном году).Мы можем видеть продажи в месяц, но важно знать и итоги.Выделите только серии определенного клиента - опять же, мы хотим знать общую стоимость серии, а не только разбивку по месяцам.

Я знаю, что мы можем установить заголовок диаграммы с помощью 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] [, thousandsSep]), который возвращает отформатированное число в виде строки вместо целого числа sum.

Рабочийпример: https://jsfiddle.net/ewolden/y03qjbhk/1/

API при событии рендеринга: https://api.highcharts.com/highcharts/chart.events.render