wake-up-neo.com

Ändern Sie die Y-Achsenwerte in Chart.js von reellen Zahlen in Ganzzahlen

Ich habe ein Diagramm, das ich mit Chart.js in meine Website aufnehmen möchte. In der Y-Achse gibt es mir reelle Zahlen anstelle von ganzen Zahlen. Wie kann ich die Zahl in ganze Zahlen ändern?

Hier ist ein Bild von dem, was ich jetzt habe:

current chart with real numbers

Und das ist der Code:

var lineChartData = {

    labels : ["2013/04/01","2013/03/31", "2013/03/30", "2013/03/29", "2013/03/28","2013/03/27", "2013/03/26"],

    datasets : [
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : ["0", "2","1", "0", "1","0","1"]
        }
    ]

}

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);
javascripthtmlchartschart.js
51
Rachid Oussanaa

Versuchen Sie dies, wobei max der höchste Wert Ihrer Daten ist.

var steps = 3;
new Chart(ctx).Bar(plotData, {
    scaleOverride: true,
    scaleSteps: steps,
    scaleStepWidth: Math.ceil(max / steps),
    scaleStartValue: 0
});
52
Mewel

Ich habe es in der neuen Version so gehandhabt:

new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value) {if (value % 1 === 0) {return value;}}
        }
      }]
    }
  }
});
99
Saeed

Ich konnte mit dem neuen Version 2 von Chart.js die vorhandenen Antworten nicht für mich zum Laufen bringen. Daher habe ich Folgendes gefunden, um dieses Problem in V2 zu lösen:

new Chart(ctx, {type: 'bar', data: barChartData,
  options:{ 
    scales: {
      yAxes: [{
        ticks: {
          stepSize: 1
        }
      }]
    }
  }
});
39
DBS

Überprüfen Sie die Dokumentation Chart.js im Abschnitt Globale Konfiguration:

// Boolean - Ob die Skalierung bei Ganzzahlen bleiben soll, nicht bei Fließkommazahlen, auch wenn Zeichenbereich vorhanden ist scaleIntegersOnly: true,

8
Raúl Otaño

Wenn Sie mit einer anderen Zahl als Null beginnen möchten, müssen Sie dies berücksichtigen:

var step  = 5;
var max   = 90
var start = 40;
new Chart(income).Bar(barData, {
    scaleOverride: true,
    scaleSteps: Math.ceil((max-start)/step),
    scaleStepWidth: step,
    scaleStartValue: start
});
7
MRodrigues