2017-01-18 4 views
2

저는 mysql에서 읽은 데이터가있는 간단한 막대 그래프에 Chart.js를 사용하고 있습니다. 불행히도 y 축은 임의의 숫자로 시작합니다. 종종 바의 일부보다 높습니다. here을 제안Chart.js 축은 항상 0으로 표시됩니다.

bar chart showing only one of four bars

내가 이미 scaleBeginAtZero: true - 옵션을 사용했습니다 아무 소용이 : : 그 가치가 충분히 높아야한다하더라도 따라서 일부 바는, 표시되지 않습니다

var ctx = $("#mycanvas"); 
Chart.defaults.global.scaleBeginAtZero = true; 

var barGraph = new Chart(ctx, { 
    type: 'bar', 
    data: chartdata, 
    options: { 
     scaleBeginAtZero: true 
    } 
}); 

하나를 아이디어? 전체 코드는 here입니다.

답변

3

그럼 아래 코드를 사용할 수 있습니다. 즉, 막대 그래프의 Y 축은 0부터 시작합니다.

options: { 
     scales : { 
      yAxes : [{ 
       ticks : { 
        beginAtZero : true 
       } 
      }] 
     } 
    } 

[샘플 코드]

var ctx = document.getElementById("myChart1"); 
var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1, 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 
    var myBarChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: { 
     scales : { 
      yAxes : [{ 
       ticks : { 
        beginAtZero : true 
       } 
      }] 
     } 
    } 
}); 
+0

와우, 그것은 웍! 고마워요! 글로벌 옵션'scaleBeginAtZero'가 왜 작동하지 않는지 궁금합니다.하지만이 문제를 해결합니다! – LukeLR

관련 문제