我使用 Chartjs 创建了一个简单的饼图。是否可以在数据本身内部创建数据?我知道有一种方法可以创建多个数据集,但这会在主饼之外创建另一个饼。
假设“hoofdgerecht”总共为 50%,但 hoofdgerecht 本身内部还存在其他属性,这些属性包括 5%、10% 和 20%。如何才能实现这一目标?
我尝试过:
Data:{
labels: ['hoofdgerecht',
data:{
labels: ['warm', 'koud']
] };
更新:我的代码
var ctx = document.getElementById("voedselVoorraad").getContext('2d');
var voedselVoorraad = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Hoofdgerecht", "Nagerecht", "Bijgerecht", "Zout", "Suiker", "Peper"],
datasets: [{
label: 'Voedsel op voorraad',
data: [35, 32, 29, 30, 28, 14],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
});
最佳答案
将它们全部视为相同的数据集项,但您可以使用相同的颜色对相关的项进行分组。您甚至还可以为它们添加不同的标签。
您可能使用了不同的方法,但想法可以是相同的。如果您可以粘贴用于绘制现在的图表的实际代码。
引用:https://www.chartjs.org/docs/latest/general/colors.html
var chartData = {
datasets: [{
data: [45, 25, 20, 10],
backgroundColor: [
pattern.draw('square', '#ff6384'),
pattern.draw('circle', '#36a2eb'),
pattern.draw('diamond', '#cc65fe'),
pattern.draw('triangle', '#ffce56'),
]
}],
labels: ['Red', 'Blue', 'Purple', 'Yellow']
};
假设您可以将 45
分为 3 个部分,您可以做的是,
var chartData = {
datasets: [{
data: [20, 10, 15, 25, 20, 10],
backgroundColor: [
pattern.draw('square', '#ff6384'),
pattern.draw('square', '#ff6384'),
pattern.draw('square', '#ff6384'),
pattern.draw('circle', '#36a2eb'),
pattern.draw('diamond', '#cc65fe'),
pattern.draw('triangle', '#ffce56'),
]
}],
labels: ['Red','Red','Red', 'Blue', 'Purple', 'Yellow']
};
在您的情况下,您必须动态更新数据集以将所有值包含为数据集项,然后必须相应地更改背景颜色和边框颜色数组。
举个例子,假设您有一个如下所示的初始数据集,
data: [35, 32, 29, 30, 28, 14];
labels: ["Hoofdgerecht", "Nagerecht", "Bijgerecht", "Zout", "Suiker", "Peper"]
现在假设您可以在 Hoofdgerecht
中将此 35
划分为更多子集,例如 10
、5
>,20
。我们的想法是像其他正常值一样将它们添加到原始数据集中。
data: [10, 5, 20, 32, 29, 30, 28, 14];
labels: ["Hoofdgerecht_1", "Hoofdgerecht_2", "Hoofdgerecht_3", "Nagerecht", "Bijgerecht", "Zout", "Suiker", "Peper"]
关于javascript - 使用 Chartjs 在数据中创建数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54751260/