Start Balkendiagramm bei 0 mit ChartJS

Ich habe ein Balkendiagramm, die ChartJS verwenden, die Daten zeigt. Basierend auf dem Balkendiagramm habe ich die Daten: 15, 2, 0, 11.Start Balkendiagramm bei 0 mit ChartJS

Ich kann alle diese Daten in der Leiste sehen, außer 0. Gibt es eine Möglichkeit, das Balkendiagramm auf 0 zu starten, damit ich auch die Daten für die vierte Spalte im Balkendiagramm sehen kann?

options: { 
    legend: { display: false }, 
    scales: { 
     yAxes: [{ 
      display: false, 
     }], 
     xAxes: [{ 
      display: true, 
     }], 
    }, 
    title: { 
    display: false, 
    } 

}

Quelle

2017-07-01 John

Noch nicht festgelegt – John

Sie werden nie eine physische Bar für Daten mit einem Wert von '0' sehen. Denken Sie darüber nach - das Fehlen eines Balkens in Ihrem Diagramm sagt dem Betrachter, dass der Wert für diese Spalte "0" ist - auch wenn die Y-Achse bei einer Zahl unter Null beginnen sollte. Wenn der Betrachter dort einen Balken sieht, denkt er, dass es einen Wert größer als "0" hat. Wenn sie dann darüber schweben und "0" sehen, werden sie alle verwirrt sein. –

Ihr Recht darüber. Aber eine Bar, die komplett leer ist, sieht nicht gut aus. Ich habe auch die "Anzeige" für "xAxes" auf "false" geändert. Das Balkendiagramm sieht aus, wenn Daten darin enthalten sind. Wenn es keine Daten gibt bekomme ich nur einen leeren Bereich auf meiner Seite – John

Nach stundenlanger Arbeit fand ich endlich eine Lösung. Es gibt keine Chartjs-Konfiguration, um es zu tun, und Sie müssen es selbst zeichnen. Lassen Sie es in onComplete Funktion

var ctx = document.getElementById("myChart").getContext('2d'); 
 
var datasets = [15, 2, 0, 11]; 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ["1", "2", "3", "4"], 
 
    datasets: [{ 
 
     label: 'value', 
 
     backgroundColor: '#F00', 
 
     data: datasets 
 
    }] 
 
    }, 
 
    options: { 
 
    scales: { 
 
     yAxes: [{ 
 
     ticks: { 
 
      beginAtZero: true 
 
     } 
 
     }] 
 
    }, 
 
    animation: { 
 
     onComplete: function() { 
 
     var dataSet = myChart.getDatasetMeta(0); 
 
     dataSet.data.forEach(elm => { 
 
      if (datasets[elm._index] == 0) { 
 
      ctx.fillStyle = '#F00'; 
 
      ctx.fillRect(elm._model.x - elm._view.width/2, elm._model.y - 1, elm._view.width, 2); 
 
      } 
 
     }) 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas class="canvasChart" id="myChart"></canvas>

Quelle

2017-07-11 06:20:19 Duannx

Ja Es hat funktioniert. Vielen Dank. Weißt du, wie ich mehrere Farben für die Bars definieren kann? Jetzt die 'ctx.fillStyle = '# F00';' Ist es möglich, mehrere Farben dafür zu definieren? Wie: 'ctx.fillStyle =" # 26B99A "," # 8cb926 "," # ede92d "," # b96f26 "," # b92626 "' ctx.fillStyle = '# FF0000'; – John

ctx.fillStyle wird in foreach-Schleife platziert. Sie können also nur die Farbe für jeweils einen Balken festlegen. Um den Balkenhintergrund zu erhalten, benutze: 'ctx.fillStyle = elm._model.backgroundColor' – Duannx

Da Ihre Y-Achse Werte von 0 bis etwas beginnt. Wenn Ihr Wert in der X-Achse also 0 ist, wäre er null und zeigt Ihnen keinen Balken von 0. Wenn Sie also 0 im Diagramm sehen möchten, sollte Ihr Startpunkt kleiner als 0 sein.

Quelle

2017-07-01 05:29:38

Also muss es bei -1 anfangen? – John

ja, wie Sie brauchen, sollte es von -1 oder weniger als das beginnen. –

Und wie kann ich es beginnen auf -1 – John

Sie können versuchen beginAtZero:true Konfigurationsoption.

options: { 
    legend: { display: false }, 
    scales: { 
     yAxes: [{ 
      display: false, 
      ticks: { 
       beginAtZero:true 
      } 
     }], 
     xAxes: [{ 
      display: true, 
     }], 
    }, 
    title: { 
    display: false, 
    } 
}

Quelle

2017-07-01 05:32:51

Nein, es hat nicht funktioniert. Es zeigt immer noch nicht die 0 – John

Mit 'beginAtZero: false,' der Balken beginnt bei 0. Aber 0 wird nicht auf der Leiste angezeigt – John

Ich glaube, du hast gesagt, du benutzt Chartsjs. Diese Frage hat bereits eine Antwort here.

Quelle

2017-07-11 00:36:49 Ben

Start Balkendiagramm bei 0 mit ChartJS

Antwort

Verwandte Themen