Chart.js Balkendiagramm - wie man Balkendiagramme von 0 einträgt

Question

Ich möchte die Balken von Null ausgehend darstellen, so dass positive Zahlen nach oben wachsen (wie normal), aber negative Zahlen von Null nach unten wachsen. Ich bekomme stattdessen alle Zahlen beginnend bei einer negativen Grundlinie.

Answer 1

Ich glaube, du bist für so etwas wie dieses

Fiddle

HTML

<canvas id="myChart" width="500" height="250"></canvas> 

JS

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July", "August"], 
    datasets: [ 
     { 
      data: [65, 59, 80, 81, 56, 55, 40, -30] 
     } 
    ] 
}; 

var options = { 
    scaleBeginAtZero: false 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var myBarChart = new Chart(ctx).Bar(data, options); 

Answer 2

suchen Sie können uns e d3.js für das beabsichtigte Verhalten. Here ist ein guter Beitrag diesbezüglich. Oder Sie können auch dieser article Feinabstimmung des Plotkit-Diagramms folgen, um den nach unten gerichteten negativen Balken anzuzeigen.

Um es mit chart.js funktioniert (wenn auch nicht ratsam, da diese nicht in Chart.js unterstützt wird) Sie dieses Github können pull und stattdessen die globale Konfigurationsobjekt zu verwenden, dh Einstellung:

Chart.defaults.global.responsive = true; 
Chart.defaults.global.scaleBeginAtZero = false; 
Chart.defaults.global.barBeginAtOrigin = false, 
Chart.defaults.global.animation = false; 

verwenden ein separates Config Objekt und gibt es in den Chart-Konstruktor:

var chartOptions = { 
    responsive:true, 
    scaleBeginAtZero:false, 
    barBeginAtOrigin:true 
} 
var chartInstance = new Chart(ctx).Bar(myChartData, chartOptions); 

Answer 3

die anderen Antworten nicht für mich arbeiten. Allerdings habe ich eine andere Konfigurationsoption gefunden, die für mich funktioniert hat.

var options = { 
    // All of my other bar chart option here 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero:true 
      } 
     }] 
    } 
} 
var ctx = document.getElementById("myChart").getContext("2d"); 
var myBarChart = new Chart(ctx).Bar(data, options); 

Passing dies für meine Chart Optionen geben Sie mir ein Balkendiagramm mit der Skala beginnend bei 0.

Answer 4

I 2.0.2 Chart.js Version bin mit und diese yAxes.min Verwendung erreicht werden könnte, und wenn das Diagramm ist leer Sie yAxes.suggestedMax

Beispiel verwenden:

options:{ 
    . 
    . 
    . 
    scales{ 
     yAxes:[{ 
      min:0, 
      //this value will be overridden if the scale is greater than this value 
      suggestedMax:10 
     }] 
    } 

Answer 5

public barChartOptions: any = { 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero: true} 
      }] 
     }, 
    }