如何在Chart.js中添加如下所示的axis break（坐标轴中断）？

术语澄清 #

你提到的这种用于标识Y轴非零起始的断开标记，标准术语是坐标轴中断（Axis Break），也可称为轴截断标记。

在Chart.js中的实现方法 #

Chart.js核心库本身没有内置该功能，但有两种可行方案：

• 第三方插件快速实现
  可以使用chartjs-plugin-axisbreak这类专门的插件，安装后通过简单配置就能添加轴中断标记。示例配置：

  new Chart(document.getElementById('yourChart'), {
    type: 'line',
    data: yourDataset,
    options: {
      scales: {
        y: {
          min: 50, // 设置你的非零起始值
          axisBreak: {
            enabled: true,
            lineColor: '#999',
            breakSize: 15
          }
        }
      },
      plugins: { axisBreak: {} }
    }
  });
  

• 自定义绘制（无插件依赖）
  利用Chart.js的afterDraw钩子手动绘制中断标记，比如在Y轴绘制斜杠组合来提示轴截断。示例代码：

  new Chart(document.getElementById('yourChart'), {
    type: 'line',
    data: yourDataset,
    options: {
      scales: {
        y: { min: 50 } // 非零起始值
      }
    },
    plugins: [{
      id: 'customAxisBreak',
      afterDraw: (chart) => {
        const yAxis = chart.scales.y;
        const ctx = chart.ctx;
        const breakPosY = yAxis.getPixelForValue(yAxis.min);
        
        ctx.save();
        ctx.strokeStyle = '#999';
        ctx.lineWidth = 2;
        // 绘制两条交叉斜杠作为中断标记
        ctx.beginPath();
        ctx.moveTo(yAxis.left, breakPosY - 7);
        ctx.lineTo(yAxis.left + 10, breakPosY + 7);
        ctx.moveTo(yAxis.left, breakPosY + 7);
        ctx.lineTo(yAxis.left + 10, breakPosY - 7);
        ctx.stroke();
        ctx.restore();
      }
    }]
  });
  

两种方式都能清晰标记Y轴的非零起始，让用户直观了解图表的坐标轴是经过截断的。

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