Angular 如何显示类似json的chartjs图表模型

我是chartjs新手我想要使用chartjs的图表这里我有json，所以我想这样显示，所以请帮助我 json数组是

[
      {
        "ChartGroupName": "Group-A",
        "Apple": 45,
        "Banana": 37,
        "Kiwi_fruit": 60,
        "Blueberry": 70,
        "Orange": 46,
        "Grape_Fruit": 33
      },
      {
        "ChartGroupName": "Group-B",
        "Apple": 50,
        "Banana": 35,
        "Kiwi_fruit": 70,
        "Blueberry": 65,
        "Orange": 40,
        "Grape_Fruit": 53
      },
      {
        "ChartGroupName": "Group-C",
        "Apple": 55,
        "Banana": 39,
        "Kiwi_fruit": 80,
        "Blueberry": 75,
        "Orange": 52,
        "Grape_Fruit": 73
      }
    ]

---

如果您的

JSON

数据存在于名为

data

的数组中，您可以生成

标签

和

数据集

，如下所示：

const labels = Object.keys(data[0]).slice(1).map(l => l.replace('_', ' '));
const datasets = data.map((o, i) => ({
    label: o[0],
    data: Object.values(o).slice(1),
    backgroundColor: colors[i]
  })
);

请看下面的可运行代码片段，它演示了如何工作

const数据=[
{
“ChartGroupName”：“A组”，
“苹果”：45，
“香蕉”：37，
“猕猴桃”：60，
“蓝莓”：70，
“橙色”：46，
“葡萄果”：33
},
{
“ChartGroupName”：“B组”，
“苹果”：50，
“香蕉”：35，
“猕猴桃”：70，
“蓝莓”：65，
“橙色”：40，
“葡萄果”：53
},
{
“ChartGroupName”：“C组”，
“苹果”：55，
“香蕉”：39，
“猕猴桃”：80，
“蓝莓”：75，
“橙色”：52，
“葡萄果”：73
}
];
常量颜色=[“橙色”、“黄色”、“浅蓝色”]
const labels=Object.keys（数据[0]）.slice（1）.map（l=>l.replace（“”，“”））；
常量数据集=data.map（（o，i）=>({
标签：o['ChartGroupName']，
数据：对象。值（o）。切片（1），
背景颜色：颜色[i]
})
);
新图表（“myChart”{
类型：'bar'，
数据：{
标签：标签，
数据集：数据集
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}],
}
}
});

您在这里是基于Json硬编码的，但我想从服务中动态获取。请查看我的更新答案，该答案现在还显示了如何从给定的Json数据生成图表配置。非常感谢您的帮助@uminder，它工作得很好。我想要随机的颜色。你真是太棒了。我希望你也能给出解决方案