要遍历一个对象数组并堆叠Chart JS柱形图,你可以按照以下步骤进行:
function createStackedBarChart(data) {
// 获取Canvas元素
var ctx = document.getElementById('myChart').getContext('2d');
// 定义柱形图配置
var chartConfig = {
type: 'bar',
data: {
labels: [], // 柱形图的标签
datasets: [] // 数据集
},
options: {
scales: {
x: {
stacked: true // 堆叠x轴
},
y: {
stacked: true // 堆叠y轴
}
}
}
};
// 遍历对象数组并生成数据集
data.forEach(function(obj) {
// 添加标签
chartConfig.data.labels.push(obj.label);
// 添加数据集
var dataset = {
label: obj.label,
data: obj.data,
backgroundColor: obj.color
};
chartConfig.data.datasets.push(dataset);
});
// 创建柱形图实例
var myChart = new Chart(ctx, chartConfig);
}
var data = [
{label: 'A', data: [10, 20, 30], color: 'red'},
{label: 'B', data: [15, 25, 35], color: 'blue'},
{label: 'C', data: [5, 10, 15], color: 'green'}
];
createStackedBarChart(data);
这样就可以遍历对象数组并生成堆叠的柱形图。每个对象包含柱形图的标签、数据和颜色。你可以根据需要自定义标签、数据和颜色。
上一篇:遍历一个对象数组