chartjs动态创建数据数组

Question

我正在使用 chartjs 库创建饼图，我想知道如何表示动态呈现图表所需的值，

在 chartjs.org 教程中，数据数组是这样表示的

var data = [
        {
           value: 300,
           color:"#F7464A",
           highlight: "#FF5A5E",
           labelColor : 'white',
           labelFontSize : '16'
        },
        {
            value: 100,
            color: "#46BFBD",
            highlight: "#5AD3D1",           
            labelColor : 'white',
            labelFontSize : '16'
        },
        {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            labelColor : 'white',
            labelFontSize : '16'
        }
    ]

并且数据将作为参数传递以呈现图表

new Chart(ctx).Pie(data);

这将呈现一个包含 3 个分区的图表：

但是说我要渲染X个分区，如何做一个数据数组？

我可以循环执行并将其附加到数据吗？

到目前为止的代码：

function drawPie(ctx){

            var newopts = {
                inGraphDataShow: true,
                inGraphDataRadiusPosition: 2,
                inGraphDataFontColor: 'white',
            }

            //=========
            // this should be dynamic (data will come the parameter)
            //==========
            var data = [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",

                labelColor : 'white',
                 labelFontSize : '16'
            },
            {
                value: 100,
                color: "#46BFBD",
                highlight: "#5AD3D1",           

                labelColor : 'white',
                labelFontSize : '16'
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",

                 labelColor : 'white',
                 labelFontSize : '16'
            }
        ]

        new Chart(ctx).Pie(data, newopts);

}

Answer 1

您只需要按照 Chart.js 期望的饼图方式生成数据结构，如果您不知道元素的最大数量，则生成颜色（如果您知道元素的最大数量，你可以从颜色数组中选择它）。例如

var dynamicData = [
    { label: "One", value: 23 },
    { label: "Two", value: 33 },
    { label: "Three", value: 43 },
    { label: "Four", value: 53 },
]

dynamicData.forEach(function (e, i) {
    e.color = "hsl(" + (i / dynamicData.length * 360) + ", 50%, 50%)";
    e.highlight = "hsl(" + (i / dynamicData.length * 360) + ", 50%, 70%)";
    // + any other code you need to make your element into a chart.js pie element
})

var ctx = document.getElementById("myChart").getContext("2d");
var myPieChart = new Chart(ctx).Pie(dynamicData);

Fiddle - http://jsfiddle.net/k4ztyqzc/

chartjs动态创建数据数组

chartjs creating data array dynamically

pie-chart

chart.js