为charts.js构建动态数组

问题描述：

我在js中构建数组传递到charts.js obj时遇到问题。我有以下数组;为charts.js构建动态数组

{"Questions":{"name":"Hello World"},"Options":{"inner":{"No":"723","Yes":"6","Maybe":"0"}}}

它被传递给下面的函数作为'响应'。我想遍历“内部”数组中的每个项目，并构建一个对象数组以传递到我的chart.js。

function drawChart(response){ 
    var array = JSON.parse(response) 
    var options = array['Options']['inner']; 

    for(var option in options){ 
     var datasetValue = []; 

     datasetValue.push = { 
      value: parseInt(options[option]), 
      color: "#F7464A", 
      highlight: "#FF5A5E", 
      label: option 
     } 
    } 
    console.log(datasetValue); 
    var mydata = { 
     datasetValue 
    } 

    var pieData = [ 
     { 
      value: 300, 
      color: "#F7464A", 
      highlight: "#FF5A5E", 
      label: "Red" 
     }, 
     { 
      value: 50, 
      color: "#46BFBD", 
      highlight: "#5AD3D1", 
      label: "Green" 
     }, 
     { 
      value: 100, 
      color: "#FDB45C", 
      highlight: "#FFC870", 
      label: "Yellow" 
     }, 
     { 
      value: 40, 
      color: "#949FB1", 
      highlight: "#A8B3C5", 
      label: "Grey" 
     }, 
     { 
      value: 120, 
      color: "#4D5360", 
      highlight: "#616774", 
      label: "Dark Grey" 
     } 
    ]; 
    var ctxOptions = { 
     responsive: true, 
     legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>", 
     showTooltips: false, 
    }; 
    var pie_ctx = document.getElementById("donut").getContext("2d"); 
    var chart = new Chart(pie_ctx).Doughnut(mydata, ctxOptions); 
    }

你可以看到上面我有两个数组，我试图建立'datasetValue'和'pieData'的动态数组。 pieData是一个示例，如果我将这个数组传递到我的新图表中，数组工作正常，但我的datasetValue只包含最后一项，而不是所有对象都是pieData。下面是我的console.log（datasetValue）的输出结果。

[push: Object] 
push 
: 
Object 
color 
: 
"#F7464A" 
highlight 
: 
"#FF5A5E" 
label 
: 
"Maybe" 
value 
: 
0

我在做什么我在重建我的阵列以匹配pieData数组格式？

答

我认为datasetValue.push = {重写datasetValue的Array.push功能。尝试datasetValue.push({追加。

而且，很可能只是最后的值会因为你重置它在每次迭代中加入datasetValue：

for(var option in options){ 
     var datasetValue = [];

感谢队友，你是对的，我已经把它放在了里面。看到我的评论如下 – gsusonline

@gsusonline它看起来像你仍然覆盖'push'函数。如果您尝试切换到'datasetValue.push（'而不是'datasetValue.push ='？ – mgamba

）哦，我已经根据您的评论修复了这个问题，我将var datasetValue移到了for循环之外，并将其设置为.push（{而不是.push = { – gsusonline

答

你datasetValue只包含最后一个项目，因为你实例化它在for循环。每次进入for循环时，datasetValue都将被重新创建（设置为空数组），因此只记录'last'项目。你应该在for循环之外实例化它。

var datasetValue = []; 
for(var option in options){ 

    datasetValue.push = { 
     value: parseInt(options[option]), 
     color: "#F7464A", 
     highlight: "#FF5A5E", 
     label: option 
    } 
}

谢谢，这就纠正了循环，所以我的数组现在有3个对象 - 但是，它仍然不会让我的图表绘制 – gsusonline

如果您可以创建一个plunker或jsfiddle演示，那将是非常棒的。 – Dino

当然，我会尝试创建一个 – gsusonline

为charts.js构建动态数组

相关推荐