2017-01-18 1 views
2

Ich verwende Chart.js für ein einfaches Balkendiagramm mit Daten aus MySQL gelesen. Leider beginnt die y-Achse mit zufälligen Zahlen, oft höher als einige der Balken. Daher sind einige Bars nicht sichtbar, auch wenn ihr Wert hoch genug sein sollte:Chart.js Achsen zeigen immer Null

bar chart showing only one of four bars

ich bereits die scaleBeginAtZero: true -option als here, ohne Erfolg vorgeschlagen verwendet haben:

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

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

Beliebig Ideen? Der vollständige Code ist verfügbar here.

Antwort

3

Nun können Sie den folgenden Code verwenden. Das heißt, Y-Achsen Ihres Balkendiagramms beginnen bei Null.

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

[Beispielcode]

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

Wow, gegegeben! Danke vielmals! Ich frage mich, warum die globale Option 'scaleBeginAtZero' nicht funktioniert, aber diese behebt sie! – LukeLR