Chart.jsは、棒グラフの垂直軸を圧縮します

最後の値が常に非常に高いデータセットがあります。これにより、棒グラフで問題が発生します。他のほとんどすべての値は、それらの上にホバリングすることなく感じを得るのは困難です。

これがスクリーンショットです：

これは私が達成しようとしていることです。

だから私の質問; これはvanilla Chart.js内で可能ですか、それともプラグインが必要ですか？そしてそうならば; 既存のプラグインはありますか、それとも自分で作成する必要がありますか？

私はまた、最初の問題に対する別の解決策を用意しています。

私はインターネット全体でこのようなものを探しましたが、残念ながらあまり運がありませんでした。

javascript charts chart.js

答えがわかりません。私もしばらくの間解決策を探しましたが、何も見つかりませんでした。そのためのプラグインがないと確信しています。私はその質問をよく見ましたが、答えはありませんでした。特に開発者がv3.0の準備をしているので、機能のリクエストは良い考えかもしれません。

— HeadhunterKev

既存のチャートの描画に使用されたコードを共有していただけますか？

— WhiteHat

logarithmicタイプを使用できますyAxis

デフォルト：線形

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>

スニペットを展開

最適化されたティック

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

コードスニペットを表示

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>

スニペットを展開

— User863
ソース