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”，颜色：“＃fff”，突出显示：“＃aaa”，标签：“HTML”}，
{值： “200”，颜色 “＃FFF”，突出显示： “＃AAA”，标签： “CSS”}];

Answer 1

您正在将数组创建为String。

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

用于在数组中插入新对象的方法是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>

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

1 个答案: