如何在Chart.js中调整y轴刻度间距？react-chartjs开发场景问题

问题现象 #

Y轴刻度过于密集无法清晰识别，示例如下：

解决方案 #

可通过以下3种方式调整Y轴刻度间距，按需选择即可：

• 增大stepSize步长
  步长直接决定刻度数量，步长越大刻度越少、间距越大。当前配置中stepSize为100，可根据你自定义的Y轴上限放大该值，比如上限为500时设为200，即可直接减少一半刻度。
• 限制最大刻度数量
  如果不想固定步长，希望Chart.js自动适配数值范围的同时避免刻度过密，可在Y轴的ticks配置中添加maxTicksLimit参数，指定Y轴最多显示的刻度数，比如设为maxTicksLimit: 5就最多展示5个刻度，自动计算合适步长。
• 调整图表高度
  如果图表容器高度过低，即使刻度数量少也会显得拥挤，可给折线图外层容器设置固定高度，或者直接给Line组件传入height属性，扩大纵向展示空间。

修改后配置示例 #

适配现有代码的修改后完整实现如下：

import React from 'react';
import styled from 'styled-components';
import { Line } from 'react-chartjs-2';

const data = {
  labels: ['1', '2', '3', '4', '5', '6', '7', '8'], // 原labels长度和data长度不匹配，已修正
  datasets: [
    {
      label: '',
      data: [120, 100, 250, 180, 380, 276, 190, 420],
      fill: false,
      backgroundColor: 'rgb(255,255,255)', // 原写法rbg为笔误，已修正
      borderColor: '#62C8C8',
      borderWidth: 3,
    },
  ],
};

const options = {
  legend: {
    display: false,
  },
  elements: {
    point: {
      radius: 0,
    },
  },
  scales: {
    xAxes: [
      {
        gridLines: {
          drawOnChartArea: false,
          tickMarkLength: 0,
        },
        ticks: {
          padding: 10,
        },
      },
    ],
    yAxes: [
      {
        gridLines: {
          display: false,
        },
        ticks: {
          beginAtZero: true,
          stepSize: 200, // 放大步长，可按需调整
          // maxTicksLimit: 5, 限制最大刻度数，和stepSize二选一即可
          padding: 10,
        },
        // 如需自定义Y轴上限，可打开下方配置
        // max: 600
      },
    ],
  },
};

// 给组件外层加固定高度，扩大纵向展示空间
const ChartWrapper = styled.div`
  height: 400px;
`;

const LineChart = () => (
    <ChartWrapper>
      <Line data={data} options={options} />
    </ChartWrapper>
);

export default LineChart;

内容的提问来源于stack exchange，提问作者Kishore S