首页 > 解决方案 > 如何使用 json 数组填充charts.js 饼图

问题描述

我的 json 数组看起来像这样

[{"count":2,"DepartementNom":"Finance"},{"count":1,"DepartementNom":"Technique"}]

如何使用该数据集填充 chart.js 饼图?我已经尝试过这段代码,但它似乎在某个地方存在问题。

    var d = {!! json_encode($json_deco) !!};
new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: d,
    options: {
      title: {
        display: true,
        text: "Nombre demployés par departement"
      }
    }
});

标签: javascriptarraysjsonchartschart.js

解决方案


你不能那样做。这里在文档中有一些例子

为图表设置数据的简单方法之一可以通过这种方式完成:

data: {
        labels: ['Finance', 'Technique'],
        datasets: [{
            data: [1, 2],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }]
    },

工作小提琴示例


推荐阅读