Chart.js komprimieren die vertikale Achse im Balkendiagramm

8

Ich habe einen Datensatz, in dem der letzte Wert immer sehr hoch ist. Dies verursacht ein Problem mit meinem Balkendiagramm. Fast alle anderen Werte sind schwer zu verstehen, ohne darüber zu schweben.

Hier ist ein Screenshot:

Beispieldiagramm

Das versuche ich zu erreichen;

Gewünschte Lösung

Also meine Frage; ist das in vanilla Chart.js möglich oder brauche ich ein Plugin? Und wenn; Gibt es ein vorhandenes Plugin oder muss ich selbst eines schreiben?

Ich bin auch offen für alternative Lösungen für das ursprüngliche Problem.

Ich habe im Internet nach so etwas gesucht, aber leider ohne viel Glück.

javascript charts chart.js Trevi Awater
quelle
Ich weiß keine Antwort. Ich suchte auch eine Weile nach einer Lösung und konnte keine finden. Ich bin mir ziemlich sicher, dass es dafür kein Plugin gibt. Ich habe diese Frage sehr oft gesehen und nie eine Antwort. Vielleicht wäre eine Feature-Anfrage eine gute Idee, vor allem, weil sich die Entwickler auf v3.0 vorbereiten.
HeadhunterKev
1
Teilen Sie bitte den Code mit, der zum Zeichnen des vorhandenen Diagramms verwendet wurde.
WhiteHat

Antworten:

3

Sie können logarithmicTyp verwendenyAxis

Standard: linear

https://www.chartjs.org/docs/latest/axes/cartesian/logarithmic.html

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
      label: "Series 1",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [65, 59, 43, 81, 56, 950],
    }]
  },
  options: {
    scales: {
      yAxes: [{
        type: 'logarithmic',
        ticks: {
          callback: function(tick, index, ticks) {
            return tick.toLocaleString();
          }
        }
      }]
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Erweitern Sie das Snippet

Optimierte Zecken

50 * (Math.floor(i / 50)), // lower 50
50 * (Math.ceil(i / 50)) // higer 50

Code-Snippet anzeigen

User863
quelle