如何像 chartjs 图表模型一样显示此 json
how to Display this json like chartjs chart model
我是 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
}
]
假设您的 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>
我是 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
}
]
假设您的 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>