ChartJS：是否可以省略最后一条网格线以保存 space

Question

我正在尝试实现下表中显示的行为（使用另一个库呈现），其中省略了 y 轴上的最后一条网格线，以避免图表中出现多余的空白 space .在这种情况下，ChartJS 似乎坚持包含值为 50 的网格线。我试过使用 axis.ticks.max 设置，并尝试通过 ticks 回调省略 ticks，但都没有达到预期的效果。注意：我希望有一个 ChartJS 选择刻度和范围的解决方案，而不是我必须手动设置它们的解决方案。（顺便说一句，我通过 Angular 的 ng2-charts 包装器使用 ChartJS）。

Answer 1

您可能需要定义一组options以获得想要的结果。

scales.y.max
scales.y.ticks.callback
scales.y.grid.color

请查看下面的可运行代码，看看它是如何完成的。

new Chart("chart", {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My Dataset",
      data: [5, 22, 34, 31, 42, 28, 45]
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        max: 46,
        ticks: {          
          stepSize: 10,
          callback: v => v > 40 ? '' : v
        },
        grid: {
          drawBorder: false,
          color: ctx => ctx.tick.value > 40 ? '#FFF' : '#DDD' 
        }
      }
    }
  }
});

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

ChartJS：是否可以省略最后一条网格线以保存 space

ChartJS: Is it possible to omit last grid line to save space

chart.js

ng2-charts