2017-10-06 178 views
2

我想绘制一个条形图chart.js使用多个标签,以便我可以操纵它们。我已经设法用折线图来做,并试图扩展我在那里没有运气的事情。我收到这个错误。什么可能导致它?Chart.js - 绘制多条标签条形图

"Uncaught TypeError: Object.defineProperty called on non-object".

的问题是在某处的数据:{},因为当我有数据作为一个简单的指数为2阵列它是工作的罚款。

编辑:当通过数据集时=空;

 var com_passed = rows[rows.length-2]["# Common Passed"]; 
     var com_failed = rows[rows.length-2]["# Common Failed"]; 
     var ctx = document.getElementById("common_chart"); 
     ctx.height = 50; 

     var historicalChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: ["Passed", "Failed"], 
       datasets: [ 
       { 
        data: com_passed, 
        label: "Passed", 
        fillColor: "red" 
       }, 
       { 
        data: com_failed, 
        label: "Failed", 
        fillColor: "green"      
       } 
        ] 
      }, 
       options: { 
        scales: { 
         yAxes: [{ 
          ticks: { 
          beginAtZero:true, 
          responsive: false, 
          maintainAspectRatio: true 
          } 
         }] 
        } 
       } 
     }); 
+0

您是否试过单步执行代码?那么你可能可以把它缩小得比“数据中的某个地方”更近。 – jdv

+0

我刚穿过代码,它显示数据集为空。我很难找出原因。 – sf8193

+0

这是应该在问题的主体中的那种细节。 – jdv

回答

1

对于那些有类似问题的人。我需要将数据com_passed和com_failed作为一个数组而不是像这样的整数。

var com_passed = rows[rows.length-2]["# Common Passed"]; 
    var com_failed = rows[rows.length-2]["# Common Failed"]; 
    var ctx = document.getElementById("common_chart"); 
    ctx.height = 50; 

    var historicalChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: ["Passed", "Failed"], 
      datasets: [ 
      { 
       data: [com_passed], 
       label: "Passed", 
       fillColor: "red" 
      }, 
      { 
       data: [com_failed], 
       label: "Failed", 
       fillColor: "green"      
      } 
       ] 
     }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
         beginAtZero:true, 
         responsive: false, 
         maintainAspectRatio: true 
         } 
        }] 
       } 
      } 
    });