Question

我用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
        }]
    },
});

Answer 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"]

现在，只需假设您可以将35中的Hoofdgerecht划分为更多的子集，例如10，5，20。想法是像其他普通值一样将它们添加到原始数据集中。

data: [10, 5, 20, 32, 29, 30, 28, 14];
labels: ["Hoofdgerecht_1", "Hoofdgerecht_2", "Hoofdgerecht_3", "Nagerecht", "Bijgerecht", "Zout", "Suiker", "Peper"]

使用Chartjs在数据中创建数据

1 个答案: