Horizontales Balkendiagramm in chart.js

Ich versuche, zeichnen Sie einen horizontalen Balken Diagramm mit chart.js 2.3.0 -

 var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d");
    var MeSeData = {
        labels: [
            "ME",
            "SE"
        ],
        datasets: [
            {
                label: "Test",
                data: [100, 75],
                backgroundColor: ["#669911", "#119966" ],
                hoverBackgroundColor: ["#66A2EB", "#FCCE56"]
            }]
    };

var MeSeChart = new Chart(MeSeContext, {
    type: 'horizontalBar',
    data: MeSeData,
    options: {
        scales: {
            yAxes: [{
                stacked: true
            }]
        }

    }
});

Aber es zeigt nur einen Balken. Hab ich was verpasst hier?

Welche version von Chart.js verwenden Sie?
Ich habe aktualisiert die Frage meine version Informationen.

InformationsquelleAutor s.k.paul | 2016-10-26

  1. 19

    Können Sie sehen, nur ein Diagramm, da der niedrigste Wert Ihrer Daten (75 hier) ist das Ausmaß der Links zu begrenzen.

    Wie in der folgenden Abbildung gezeigt von code führen, wenn Sie die Maus auf die Waage, kann man noch die dazugehörigen Daten, das heißt, es ist hier.

    Horizontales Balkendiagramm in chart.js

    Haben Sie zwei Möglichkeiten dies zu beheben :

    • Legen Sie die min Eigenschaft des xScale Zecken auf den gewünschten Wert (genug, um es zu sehen natürlich) :

      var MeSeChart = new Chart(MeSeContext, {
    type: 'horizontalBar',
    data: MeSeData,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    min: 60 //Edit the value according to what you need
                }
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

      Können Sie sehen das Ergebnis mit einem min 60 auf dieser jsFiddle :

      Horizontales Balkendiagramm in chart.js

    • Legen Sie die beginAtZero Eigenschaft true, das ist die gleiche Einstellung wie min 0 :

      xAxes: [{
    ticks: {
        beginAtZero: true
    }
}],

      Sehen Sie das Ergebnis mit der beginAtZero - Eigenschaft auf true auf dieser jsFiddle.

    InformationsquelleAutor tektiv

Schreibe einen Kommentar