javascript - 我想根据数组长度乘以图表数据

Question

我用这个，按照数组(arr)的方式乘以圆环图，但它不能更改为对象，(数据具有字符串类型)。所以图表没有出现在这里..，如何修复它

   var arr=['HTML','CSS','JS'],i,data;  
   data ='[';
   for(i=0;i<arr.length;i++){        
              if(i==arr.length-1){              
                                 data+='{value:"300",color:"#fff",highlight:"#aaa",label:arr[i]}';
                                 }
                             else{
                                data+='{value:"300",color:"#fff",highlight:"#aaa",label:arr[i]},';
                                 }
                         }
  data += ']';

 var dat = data;
window.onload = function () {
            var ctx = document.getElementById("chart-area").getContext("2d");                         
            window.myBar = new Chart(ctx).Doughnut(dat,{
                                              responsive: true,
                                                       });      
                            };

//想要这样

dat =[{值:"300",颜色:"#fff",突出显示:"#aaa",标签:"HTML"},
{值:“200”，颜色:“#fff”，突出显示:“#aaa”，标签:“CSS”}];

Answer 1

您正在将数组创建为字符串。

You need to create an array of objects [{},{},{}].

The method used to INSERT a new object in an array is PUSH().

检查 fiddle 。现在它工作正常(在屏幕上移动鼠标可以看到图表在那里(只有当鼠标悬停在它上面时你才会看到它):

window.onload = function() {

  var arr = ['HTML', 'CSS', 'JS'],
    i, data;
  data = [];
  for (i = 0; i < arr.length; i++) {
    if (i == arr.length - 1) {
      data.push({
        value: "300",
        color: "#fff",
        highlight: "#aaa",
        label: arr[i]
      });

    } else {
      data.push({
        value: "300",
        color: "#fff",
        highlight: "#aaa",
        label: arr[i]
      });

    }
  }

  var dat = data;

  var ctx = document.getElementById("chart-area").getContext("2d");
  window.myBar = new Chart(ctx).Doughnut(dat, {
    responsive: true,
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.js"></script>

<canvas id="chart-area"></canvas>