Chart.js komprimieren die vertikale Achse im Balkendiagramm

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:

Das versuche ich zu erreichen;

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

Teilen Sie bitte den Code mit, der zum Zeichnen des vorhandenen Diagramms verwendet wurde.

— WhiteHat

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/chart.js@2.8.0"></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

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();
          }
        },
        afterBuildTicks: function(pckBarChart) {
          pckBarChart.ticks = pckBarChart.chart.data.datasets[0].data.flatMap(i => [
            50 * (Math.floor(i / 50)), // lower 50
            50 * (Math.ceil(i / 50)) // higer 50
          ])
        }
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Erweitern Sie das Snippet

— User863
quelle