Chart.js nén trục dọc trên barchart

Tôi có một bộ dữ liệu trong đó giá trị cuối cùng luôn luôn rất cao. Điều này gây ra một vấn đề với biểu đồ thanh của tôi; hầu như tất cả các giá trị khác khó có được cảm giác mà không di chuột qua chúng.

Đây là một ảnh chụp màn hình:

Đây là những gì tôi đang cố gắng để đạt được;

Vì vậy, câu hỏi của tôi; điều này có thể có trong vanilla Chart.js hay tôi cần một plugin? Và nếu thế; Có một plugin hiện có hay tôi cần phải tự viết một cái?

Tôi cũng đang mở cho các giải pháp thay thế cho vấn đề ban đầu.

Tôi đã tìm kiếm trên internet những thứ như thế này nhưng thật không may, không gặp nhiều may mắn.

javascript charts chart.js

— Trevi Awater
nguồn

Tôi không biết câu trả lời. Tôi đã tìm kiếm một giải pháp trong một thời gian và không thể tìm thấy bất kỳ. Tôi khá chắc chắn rằng không có plugin cho điều đó. Tôi thấy câu hỏi đó rất thường xuyên và không bao giờ có câu trả lời. Có lẽ một yêu cầu tính năng sẽ là một ý tưởng tốt, đặc biệt là vì các nhà phát triển đang chuẩn bị cho phiên bản 3.0.

— HeadhunterKev

bạn sẽ vui lòng chia sẻ mã được sử dụng để vẽ biểu đồ hiện có?

— WhiteHat

Bạn có thể sử dụng logarithmicloạiyAxis

Mặc định: tuyến tính

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>

Mở rộng đoạn trích

Bọ ve được tối ưu hóa

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

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— Người dùng863
nguồn