在chart.js甜甜圈图表中使用两个数据集,可以通过以下步骤实现:
下面是一个示例代码:
// 引入chart.js库
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
// 创建canvas元素
<canvas id="myChart"></canvas>
// 创建数据对象
var data = {
labels: ['数据集1', '数据集2'],
datasets: [{
data: [30, 70], // 数据集1的数据
backgroundColor: ['#FF6384', '#36A2EB'] // 数据集1的颜色
}, {
data: [50, 50], // 数据集2的数据
backgroundColor: ['#FFCE56', '#4BC0C0'] // 数据集2的颜色
}]
};
// 配置选项
var options = {
type: 'doughnut',
cutoutPercentage: 70 // 调整甜甜圈的大小
};
// 创建图表实例
var myChart = new Chart(document.getElementById('myChart'), {
type: options.type,
data: data,
options: options
});
这样,你就可以在chart.js甜甜圈图表中使用两个数据集了。根据实际需求,你可以根据数据集的数量和具体的颜色要求进行调整。
领取专属 10元无门槛券
手把手带您无忧上云