javascript - ChartJS 使用 jQuery 数组动态添加值

Question

我正在尝试使用 jQuery/AJAX 查询中的数据动态填充 ChartJS 中的饼图。

我唯一遇到的困难是以 ChartJS 理解的格式创建数据。这是所需的格式:

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

当我尝试创建它时，我在每组数据周围加上双引号""。我知道这是一个简单的错误，但我无法弄清楚。这就是我创建数据的方式(部分 jQuery 代码):

.success(function(response) {
    if(!response.errors && response.result) {
        var doughnutData = [];
        $.each(response.result, function( index, value) {
            doughnutData.push('{ label: "'+value[0]+'", value: '+value[2]+',color:"#F7464A" }');
       });

        console.log(doughnutData);

var doughnutOptions = {
    segmentShowStroke : true,
    segmentStrokeColor : "#fff",
    segmentStrokeWidth : 2,
    percentageInnerCutout : 50,
    animation : true,
    animationSteps : 100,
    animationEasing : "easeOutBounce",
    animateRotate : true,
    animateScale : true,
    onAnimationComplete : null
}
var ctx = document.getElementById("chart3").getContext("2d");
var mydoughnutChart = new Chart(ctx).Doughnut(dynamicData, doughnutOptions);
    } else {
    alert("error");
    }

控制台显示:

["{ label: "17x1p14e6662", value: 16,color:"#F7464A" }", "{ label: "8734hjgfd784ew", value: 8,color:"#F7464A" }"]

我做错了什么？

Answer 1

控制台将对象作为字符串输出，因为您将字符串推送到 var donutData，您正在将对象用引号括起来，并将值连接到字符串，从而处理参数作为字符串类型传递给 Push 方法。

使用push方法将对象添加到数组的正确方法是这样的。

array.push({property:'string', property:2})

这意味着您的代码应该如下所示。

doughnutData.push({ label:value[0], value:value[2],color:"#F7464A" });

Here是有关 Push 方法如何在数组上工作的链接，并且 Here是另一个指向 javascript 对象的链接

另一件事是，当您创建图表时，您传递的是 vardynamicData 而不是 vardonutData。