Chart.js 2如何在刻度间显示无对应标签的垂直网格线

实现方案 #

Chart.js 2默认仅在有可见标签的刻度位置渲染网格线，你可以通过调整刻度配置实现中间网格线保留，无需额外自定义插件：

• 调整x轴刻度粒度：将x轴ticks.stepSize设为你需要的网格线间隔，保证每个需要出现网格线的位置都有对应的刻度节点。
• 控制标签显隐：通过ticks.callback回调函数，仅在需要显示标签的位置返回刻度文本，其余位置返回空字符串，这样既隐藏了不需要的标签，又保留了对应刻度节点。
• 开启网格线渲染：确认x轴gridLines.display和gridLines.drawOnChartArea均设为true，保证所有刻度节点对应的网格线正常渲染到图表区域。

React-chart-js 2 配置示例 #

import { Line } from 'react-chartjs-2';

const ChartComponent = () => {
  const options = {
    scales: {
      xAxes: [{
        ticks: {
          // 按网格线需求设置最小刻度间隔，示例为每1单位一条网格线
          stepSize: 1,
          callback: function(value, index) {
            // 示例：每2个刻度显示一次标签，其余位置隐藏标签
            return index % 2 === 0 ? value : '';
          }
        },
        gridLines: {
          display: true,
          drawOnChartArea: true
        }
      }],
      yAxes: [{
        // 保留原有y轴配置即可
      }]
    }
    // 其余图表原有配置保持不变
  };

  // 你的data配置
  const data = {
    labels: [...], // 类目轴场景直接填充所有对应网格线位置的类目
    datasets: [...]
  };

  return <Line data={data} options={options} />;
};

注意事项 #

• Chart.js 2的网格线配置字段为gridLines，不要和V3及以上版本的grid字段混淆，否则配置不生效。
• 若x轴为类目类型（category），直接把所有对应网格线位置的类目填充到labels数组中，再通过回调控制标签显隐即可，无需调整stepSize。

内容的提问来源于stack exchange，提问作者Cuong Nguyen