2017-10-06 46 views
2

複数のラベルを使用して操作できるようにchart.jsで棒グラフを描画しようとしています。私は折れ線グラフでそれを行うことができて、私がそこで何をしたのかを運の上に広げようとしました。私はこのエラーが発生しています。何が原因だろうか?Chart.js - 複数のラベルを含む棒グラフを描画する

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

問題はデータのどこかにあります:{}単純な2つのインデックス配列としてデータがあったときにうまくいきました。

編集:データセットをステップ実行するとき= null;

 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

私はコードを踏んで、データセットがnullであることを示しています。私はなぜか分かり難い時を過ごしています。 – 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 
         } 
        }] 
       } 
      } 
    }); 
関連する問題