时间戳

首页 > 解决方案 > 如何像chartjs图表模型一样显示这个json

angular - 如何像chartjs图表模型一样显示这个json

问题描述

我是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
      }
    ]

标签： angulartypescriptchartjs-2.6.0

解决方案

如果您的JSON数据存在于名为 的数组中data，您可以生成labels如下datasets：

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 data = [
  {
    "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
  }
];
const colors = ['orange', 'yellow', 'lightblue']

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

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: datasets
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

推荐阅读