2017-10-06 7 views
2

여러 개의 레이블을 사용하여 차트를 조작 할 수있는 chart.js로 막 대형 차트를 그려야합니다. 필자는 꺾은 선 차트로 그 일을 처리했으며 행운을 빌어 내가 그곳에서 한 일을 연장하려고 노력했습니다. 이 오류가 발생합니다. 무엇 때문에 그 원인이 될 수 있습니까?Chart.js - 여러 레이블로 막대 차트 그리기

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

데이터가 문제가되는 부분은 {}입니다. 왜냐하면 데이터가 단순한 2 개의 인덱스 배열로 구성되어있어 정상적으로 작동했기 때문입니다.

편집 : datapet = 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 
         } 
        }] 
       } 
      } 
    });