使用 Chart.js 控制柱状图 Y 轴范围

本文档旨在指导开发者如何使用 Chart.js 库来精确控制柱状图的 Y 轴显示范围，避免因数据范围过小而导致视觉上的误导。通过设置 min、max 和 stepSize 属性，可以自定义 Y 轴的最小值、最大值和刻度间隔，从而优化图表的可读性和准确性。

Chart.js Y 轴范围控制详解

Chart.js 是一个流行的 JavaScript 图表库，可以轻松创建各种图表，包括柱状图、折线图、饼图等。在创建柱状图时，有时我们需要自定义 Y 轴的范围，以更好地展示数据。默认情况下，Chart.js 会自动根据数据范围调整 Y 轴的范围，但有时这种自动调整可能不符合我们的需求，例如，当数据范围较小时，Y 轴的起始值可能不是 0，导致视觉上的误导。

要解决这个问题，我们可以使用 Chart.js 提供的 scales.yAxes.ticks 选项来手动设置 Y 轴的范围。

核心配置选项

scales.yAxes.ticks 选项允许我们配置 Y 轴的刻度。其中，有三个关键属性可以控制 Y 轴的范围：

• min: 设置 Y 轴的最小值。
• max: 设置 Y 轴的最大值。
• stepSize: 设置 Y 轴的刻度间隔。

通过设置这三个属性，我们可以精确地控制 Y 轴的显示范围和刻度。

示例代码

以下是一个示例代码，展示如何使用 min、max 和 stepSize 属性来控制柱状图的 Y 轴范围：

const options = {
  type: 'bar',
  data: {
    labels: ["Smartphone", "Trashphone"],
    datasets: [{
      label: '# of Votes',
      data: [4, 4],
      backgroundColor: [
        'rgba(255, 99, 132, 0.9)',
        'rgba(54, 162, 235, 0.7)',
      ]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 10,
          stepSize: 1
        }
      }]
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);