javascript - 使用 angular-highchart 的堆积条形图

Question

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 版本。

我看过很多参考资料，但没有什么与上面相同。

Answer 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/

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