如何使用 highchart 对每个组求和并在每个组的左侧添加一个条形

Question

我正在使用此脚本来显示每个组的总和并添加新栏，但它不起作用。 我已经尝试了很多次但不起作用。请检查

let seriesSumArr = [230, 230, 230];
const seriesData = [
    {
        "data": [
            100,
            100,
            100
        ],
        "name": "April"
    },
    {
        "data": [
            50,
            50,
            50
        ],
        "name": "May"
    },
    {
        "data": [
            80,
            80,
            80
        ],
        "name": "Jun"
    }
];

// Calculate the sum for each group
let sums = seriesData.map(series => series.data.reduce((acc, val) => acc + val, 0));
// Add the sum bars to the left side of each group
seriesData.forEach((series, index) => {
    series.data.unshift(seriesSumArr[index]);
});
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    series: seriesData
});

请检查不起作用的示例。 https://jsfiddle.net/xduq6hsv/5/

谢谢

Answer 1

例如，您可以在数组上使用

forEach()

方法对这些点求和，然后将其作为另一个系列传递。

const seriesData = [{
  name: 'April',
  data: [
    110,
    100,
    120
  ]
}, {
  name: 'May',
  data: [
    50,
    60
  ]
}, {
  name: 'Jun',
  data: [
    70,
    80,
    90
  ]
}];

const sumData = []

seriesData.forEach((_, i) => {
  let sum = 0;

  seriesData.forEach((series) => {
    const y = series.data[i];
    if (y) sum += series.data[i]
  })

  sumData.push(sum)
});

Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  xAxis: {
      categories: seriesData.map(series => series.name),
  },
  series: [{
    name: 'Sum',
    data: sumData,
    color: {
      pattern: {
        color: 'blue',
        path: {
          d: 'M 0 2 L 5 2 M 0 4 L 5 4',
          strokeWidth: 1
        },
        width: 5,
        height: 5,
        opacity: 0.5
      }
    }
  }, ...seriesData]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>

<div id="container"></div>

演示：https://jsfiddle.net/BlackLabel/u5c28m7s/