ChartsJS 线图中的自定义刻度

Question

以 ChartsJS 线图为例 ( https://www.chartjs.org/docs/latest/charts/line.html )。如何更改 Y 轴，使其仅显示两个标签：“更少”位于最大 Y 值的 25% 处，“更多”位于最大 Y 值的 75% 处？

Answer 1

这可以通过在 y 轴上定义afterBuildTicks和函数来完成。ticks.callback

请看一下下面的可运行代码并了解它是如何工作的。

new Chart('my-chart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
      label: 'My Data',
      data: [65, 59, 80, 81, 56, 55, 40],
      borderColor: '#1f77b4'
    }]
  },
  options: {
    scales: {
      y: {    
         afterBuildTicks: axis => {
           let values = axis.ticks.map(t => t.value);
           let max = Math.max(...values);
           let min = Math.min(...values);
           axis.ticks = [
             { value: min + (max - min) * 0.25 },
             { value: min + (max - min) * 0.75 }
           ]
         },         
         ticks: {
           callback: (v, i) => i ? 'more' : 'less'
         }
      }
    }
  }
});

canvas {
  max-height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="my-chart"></canvas>