Chart.js 壓縮條形圖上的垂直軸

Question

我有一個數據集，其中最后一個值總是很高。 這會導致我的條形圖出現問題； 幾乎所有其他值都很難在不懸停的情況下獲得感覺。

這是一個屏幕截圖：

這就是我正在努力實現的目標；

所以我的問題; 這在 vanilla Chart.js 中是可能的還是我需要一個插件？ 如果是這樣; 有現有的插件還是我需要自己編寫一個？

我也對初始問題的替代解決方案持開放態度。

我已經在互聯網上尋找類似的東西，但不幸的是沒有太多運氣。

Answer 1

您可以使用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>