Wie kann ich meine Y-Achse auf chart.js konfigurieren?

Question

Ich versuche, ein Diagramm zu erstellen.

Meine y-Achse beginnt mit 0 hier, ich weiß nicht, wie man es konfiguriert und warum es spricht 0 - Ich sehe anderen Beitrag, die scaleOverride erwähnt: true, scaleStartValue: 0,1, scaleStepWidth: 5 - Ich weiß nicht wie benutze das in meinem unteren Code, wie kann man die Y-Achse in chart.js konfigurieren.

Jede mögliche Zeiger

sein

I-Code verfolgt haben

var barChartData = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ 
     label: 'Dataset 1', 
     backgroundColor: "rgba(220,220,220,0.5)", 
     data: [6, 6, 6, 8, 6, 9, 8] 
    }] 
}; 
function barChart() { 
    var context = document.getElementById('stacked').getContext('2d'); 
    var myBar = new Chart(context, { 
     type: 'bar', 
     data: barChartData, 
     options: { 
      title:{ 
       display:true, 
       text:"Chart.js Bar Chart - Stacked" 
      }, 
      tooltips: { 
       mode: 'label' 
      }, 
      responsive: true, 
      scales: { 
       xAxes: [{ 
        stacked: true, 
       }], 
       yAxes: [{ 
        stacked: true 
       }] 
      } 
     } 
    }); 
}; 
$(document).ready(function() { 
    $(document).ready(barChart); 
}); 

Answer 1

Vielen Dank für Ihre Hilfe, ich habe beobachtet, dass chart.js basierend auf Ihren Daten automatisch Werte für die y-Achse annimmt. Sie können die y/x-Achseneinstellung unter Optionen> Skalen ändern, ich musste auch die Schrittgröße ändern von Y-Achse und loswerden X-Achse Gitterlinie, "Zecken" ist etwas, was ich suchte, hier ist meine Beispiel-Code und Schritte, um all diese zu erreichen.

Schritt 1) ​​Canvas ist dies Platzhalter, wo Ihr Diagramm auf JSP

<canvas width="1393px;" height="500px;" id="stacked"></canvas> 

Schritt 2) Beispiel erzeugen Datensätze angezeigt werden (dies ist JSON Sie auf Ihrer Anforderung erstellen müssen basiert, aber stellen Sie sicher, dass Sie genau liefern die gleiche formatiertem JSON-Antwort, wie unten zusammen mit Ihren Daten.

var barChartData = { 
labels: ["January", "February", "March", "April", "May", "June", "July"], 
datasets: [{ 
    label: 'Dataset 1', 
    backgroundColor: "red", 
    data: [9, 6, 6, 8, 6, 9, 8] 
}, 
{ 
    label: 'Dataset 1', 
     backgroundColor: "rgba(225,226,228,0.5)", 
     data: [9, 6, 6, 8, 6, 9, 8] 
    }] 
}; 

or you can call JSON from controller inside script as below 

var jsonArry = <%=request.getAttribute("jsonArry")%>; 

Schritt 3), dass JSON aufrufen, die Sie in Schritt 2 erstellt haben,

function barChart(){ 
      var context = document.getElementById('stacked').getContext('2d'); 
      var myBar = new Chart(context, { 
      type: 'bar', 
      data: jsonArry, 

    options: { 
     tooltips: { 
      mode: 'label' 
     }, 
     responsive: true, 
     scales: { 
      xAxes: [{ 
       ticks:{ 
        stepSize : 10, 

       }, 
       stacked: true, 
      gridLines: { 
        lineWidth: 0, 
        color: "rgba(255,255,255,0)" 
       } 
      }], 
      yAxes: [{ 

       stacked: true, 
       ticks: { 
        min: 0, 
        stepSize: 1, 
       } 

      }] 
     } 
     } 
    }); 

}; 

Hoffnung, das wird helfen, als Referenz die ich verwendet habe Dokumentation folgende Chart JS

Dank.

Answer 2

Entfernen Sie einfach die stacked Option und es wird aufhören ab 0 (es sei denn, Ihre Daten von 0 beginnt).

Verwandte Geige - http://jsfiddle.net/rsyk9he0/

Für gestapelte Diagramme, baut Chart.js eine Liste von positiven und negativen Summen für jeden Stapel (bar) und verwendet dann, dass die Skala min und max Werte herauszufinden. Wenn es keine negativen Werte gibt, ist die Liste der negativen Summen eine Liste von Nullen. Dies zwingt die Skala min 0.

---

scaleStartValue, scaleStepWidth usw. sind Optionen aus v1.x von Chart.js zu sein. Sie verwenden v2.x. Siehe How to make integer scale in Chartjs für die 2.x-Äquivalente.