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 doughnutData ，您这样做是将对象包装在引号中并将值连接到字符串以便处理参数作为字符串类型传递给push方法。

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

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

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

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

Here是关于push方法如何在数组上工作的链接，而Here是另一个指向javascript对象的链接

另一件事是，当您创建图表时，您正在传递 var dynamicData 而不是 var doughnutData 。

ChartJS使用jQuery数组动态添加值

1 个答案: