我想根据数组长度将图表数据相乘

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 =[{value:"300",color:"#fff",highlight:"#aaa",label:"HTML"},
{value:"200",color:"#fff",highlight:"#aaa",label:"CSS"}];

Answer 1

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

您需要创建一个对象数组 [{},{},{}]。

在数组中插入新对象的方法是PUSH()。

检查小提琴。现在它工作正常（在屏幕上移动鼠标以查看图表是否存在（只有当鼠标悬停时才能看到它）：

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>