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

Question

我是 chartjs 的新手我想要使用 chartjs 的图表我有 json 所以我想像这样显示Sample Image is this 所以请帮助我 而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
      }
    ]

Answer 1

如果您的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]
  })
);

请看下面的可运行代码 sn-p，它说明了它是如何工作的。

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>