为charts.js构建动态数组

时间:2017-06-06 16:10:34

标签: javascript chart.js

我在js中构建一个数组以传递给charts.js obj时遇到了麻烦。我有以下数组;

{"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);
  }

你可以看到上面我有两个数组,我的动态数组我试图建立数据集值&#39;和&#39; pieData&#39;。 pieData是一个示例,如果我将此数组传递到我的新图表中,则数组工作正常,但我的datasetValue似乎只包含最后一项,而不是像pieData那样包含所有对象。下面是我的console.log(datasetValue);

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

我在重建数组以匹配pieData数组格式时正在做什么?

2 个答案:

答案 0 :(得分:2)

我认为datasetValue.push = {会覆盖Array.push的{​​{1}}函数。请尝试datasetValue追加。

此外,由于您在每次迭代时重置它,因此可能只会将最后一个值添加到datasetValue.push( {

datasetValue

答案 1 :(得分:2)

您的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
  }
}