使用 angular-highchart 的堆积条形图

【问题标题】：stacked bar chart using angular-highchart使用 angular-highchart 的堆积条形图
【发布时间】：2021-06-20 09:37:58
【问题描述】：

var array= [{ name: "LTNS", id: 1, percentage: 60, price: 900000 },
        { name: "NPCS", id: 2, percentage: 30, price: 342000 },
        { name: "MARCOS", id: 3, percentage: 10, price: 600000 }]

使用上面的数组，我需要在 angular-highchart 中构建堆积条形图，结果应该如下所示。

我正在使用 angular-highchart 7.2.0 版本。

我看过很多参考资料，但没有什么和上面一样。

【问题讨论】：

栏将按百分比呈现。

标签： javascript angular typescript highcharts angular-highcharts

【解决方案1】：

我认为你可以从这个方法入手：

var array = [{
    name: "LTNS",
    id: 1,
    percentage: 60,
    price: 900000
  },
  {
    name: "NPCS",
    id: 2,
    percentage: 30,
    price: 342000
  },
  {
    name: "MARCOS",
    id: 3,
    percentage: 10,
    price: 600000
  }
].reverse();

array.forEach(obj => {
  obj.data = [obj.percentage]
})

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  plotOptions: {
    bar: {
      stacking: 'normal',
            groupPadding: 0.2
    }
  },
  series: array
});

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

如果您在实现其他功能时遇到问题，请提出具体问题。

【讨论】：