我必须用chartjs创建甜甜圈图表,我已经设法创建了。但有一个小问题,在让我们调用图表的内容,我有不同的颜色和数据,但从主标签从哪里应该过滤它,我得到一个标签下的所有数据,为什么,我做错了什么?
<script>
var ctx = document.getElementById("racionMix").getContext('2d');
var racionChart = new Chart(ctx,
{
type: 'doughnut',
data: {
labels: [],
datasets: [
]
},
// Configuration options go here
options: {
plugins: {
title: {
display: true,
fontSize: 16,
text: 'Racion Mix'
},
}
}
});
@for (int index = 0; index < @Model.Count; index++)
{
@:addData( "@Model[index].MixName", "@Model[index].TotalQty", getRandomColor())
}
function addData(label, value, color) {
this.racionChart.data.labels.push(label);
var newDataset = {
label: label,
backgroundColor: color,
data: value,
}
this.racionChart.data.datasets.push(newDataset);
this.racionChart.update();
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
还有一个想法,这是困惑我,为什么我没有得到像这里的图表https://www.chartjs.org/docs/latest/samples/other-charts/doughnut.html在我的图表似乎像圆圈在圆圈...
1条答案
按热度按时间x8diyxa71#
这是因为您创建了新的数据集,而不是添加到数据集。每个数据集都是它自己的圆。如果您将
addData
函数和图表示例化更改为以下内容,它将按预期工作: