ChartJS一个标签下的所有内容?

qyuhtwio  于 2023-06-22  发布在  Chart.js
关注(0)|答案(1)|浏览(182)

我必须用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在我的图表似乎像圆圈在圆圈...

x8diyxa7

x8diyxa71#

这是因为您创建了新的数据集,而不是添加到数据集。每个数据集都是它自己的圆。如果您将addData函数和图表示例化更改为以下内容,它将按预期工作:

var racionChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: [],
        datasets: [{
            label: 'text that appears in the legend',
            data: [],
            backgroundColor: []
        }]
    },
    // Configuration options go here
    options: {
        plugins: {
            title: {
                display: true,
                fontSize: 16,
                text: 'Racion Mix'
            },
        }
    }
});

function addData(label, value, color) {
    this.racionChart.data.labels.push(label);
    this.racionChart.data.datasets[0].data.push(value);
    this.racionChart.data.datasets[0].backgroundColor.push(color);
    this.racionChart.update();
}

相关问题