Chart.js左侧Y轴stepSize不生效问题求助

你遇到的问题是Chart.js 2.x版本的默认刻度逻辑导致的——它会自动调整刻度来保证可读性，哪怕你手动设置了stepSize，只要它觉得当前步进的刻度不够“规整”，就会偷偷修改步进值。

解决办法 #

给左Y轴的ticks配置加上autoSkip: false和beginAtZero: false，强制禁用自动优化逻辑，让图表严格遵循你设置的min、max和stepSize：

yAxes: [{
    id: "A",
    type: "linear",
    position: "left",
    ticks: {
        min: 3800,
        max: 4140,
        stepSize: 34.0,
        autoSkip: false, // 禁用自动跳过刻度
        beginAtZero: false // 不从0开始，避免干扰自定义范围
    }
},
// 右轴配置不变
{
    id: "B",
    type: "linear",
    position: "right",
    ticks: {
        min: 370,
        max: 390,
        stepSize: 2.0
    }
}]

完整修改后的代码 #

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<body>
  <div>
    <table style="border-collapse: collapse; width: 1050px; padding-top: 10px; height: 1050px" border="0">
      <canvas id="myChart2" style="width:100%;max-width:700px"></canvas>
      <script>
        var dates = ['07/29/2022', '08/01/2022', '08/02/2022', '08/03/2022', '08/04/2022', '08/05/2022', '08/06/2022', '08/07/2022', '08/08/2022', '08/09/2022', '08/10/2022', '08/11/2022'];
        var portfolio_values = [3869.73, 3802.77, 3811.14, 3813.0, 3818.58, 3954.36, 3954.36, 3954.36, 3993.42, 3983.19, 4131.99, 4086.42];
        var sp500_values = [378.79, 377.65, 375.21, 381.07, 380.77, 379.98, 379.98, 379.98, 379.64, 378.14, 386.06, 386.43];

        new Chart("myChart2", {
          type: "line",
          data: {
            labels: dates,
            datasets: [{
                fill: false,
                lineTension: 0,
                backgroundColor: "rgba(0,0,255,1.0)",
                borderColor: "rgba(0,0,255,0.1)",
                yAxisID: "A",
                label: "Twitter",
                data: portfolio_values
              },
              {
                fill: false,
                lineTension: 0,
                backgroundColor: "rgba(255,0,0,1.0)",
                borderColor: "rgba(255,0,0,0.1)",
                yAxisID: "B",
                label: "S&P500",
                data: sp500_values
              }
            ]
          },
          options: {
            title: {
              display: true,
              text: "Twitter vs S&P500"
            },
            legend: {
              display: true
            },
            scales: {
              yAxes: [{
                  id: "A",
                  type: "linear",
                  position: "left",
                  ticks: {
                    min: 3800,
                    max: 4140,
                    stepSize: 34.0,
                    autoSkip: false,
                    beginAtZero: false
                  }
                },
                {
                  id: "B",
                  type: "linear",
                  position: "right",
                  ticks: {
                    min: 370,
                    max: 390,
                    stepSize: 2.0
                  }
                }
              ]
            }
          }
        });
      </script>
    </table>
  </div>
</body>

</html>

补充说明 #

如果上面的配置还是没生效，可以直接手动指定所有刻度值，彻底绕过Chart.js的自动生成逻辑：

ticks: {
    min: 3800,
    max: 4140,
    callback: function(value, index, values) {
        // 手动生成从3800开始，步长34的刻度
        return 3800 + index * 34;
    },
    // 强制生成11个刻度
    maxTicksLimit: 11
}

内容的提问来源于stack exchange，提问作者Michael Pandola