如何在Chart.js中中断折线？避免绘制非连续区间线段

方案1：拆分多个数据集（最简洁） #

直接把两个不连续的区间分成两个独立的数据集，每个数据集只包含对应区间的两个点。Chart.js默认不会跨数据集绘制连线，完美解决中间连线的问题，而且数据量不会增加，还能灵活控制每个区间的样式（比如统一颜色的话设置相同的borderColor）。

示例代码：

const data = {
  datasets: [
    {
      label: '区间1',
      data: [{x: '2020/1/1', y: 1}, {x: '2020/2/2', y: 1}],
      borderColor: '#333',
      borderWidth: 2,
      fill: false
    },
    {
      label: '区间2',
      data: [{x: '2021/3/4', y: 1}, {x: '2021/6/6', y: 1}],
      borderColor: '#333',
      borderWidth: 2,
      fill: false
    }
  ]
};

方案2：单数据集插入单个NaN（轻量） #

不用拆分区间也不用翻倍数据，只需要在两个区间的末尾和起始点之间插入一个NaN值，Chart.js遇到NaN会自动断开线段，不会连接前后两个区间。这种方式数据量只增加一个元素，比你之前的翻倍方案高效得多。

示例代码：

const data = {
  labels: ['2020/1/1', '2020/2/2', '', '2021/3/4', '2021/6/6'], // 空字符串不影响，x轴会自动处理
  datasets: [{
    data: [1, 1, NaN, 1, 1],
    borderColor: '#333',
    borderWidth: 2,
    fill: false
  }]
};

如果用的是时间轴（type: 'time'），直接在数据数组里插入{x: null, y: NaN}或者对应的时间点但y为NaN也可以，Chart.js会自动跳过连线。

方案3：自定义插件（适合复杂场景） #

如果你的数据量很大或者需要动态控制区间，可以写一个简单的自定义插件，在绘制线段前判断两个相邻点是否属于同一个区间，不属于就跳过绘制这条线段。

示例插件：

const skipLinePlugin = {
  beforeDraw: (chart) => {
    const dataset = chart.data.datasets[0];
    const points = chart.getDatasetMeta(0).data;
    // 定义区间边界，这里根据你的实际区间调整
    const intervalEnd1 = new Date('2020/2/2').getTime();
    const intervalStart2 = new Date('2021/3/4').getTime();
    
    for (let i = 0; i < points.length - 1; i++) {
      const currentX = new Date(dataset.data[i].x).getTime();
      const nextX = new Date(dataset.data[i+1].x).getTime();
      // 判断是否跨区间
      if (currentX <= intervalEnd1 && nextX >= intervalStart2) {
        // 跳过这条线段的绘制
        points[i]._model.skip = true;
        points[i+1]._model.skip = true;
      }
    }
  }
};

// 注册插件
Chart.register(skipLinePlugin);

这种方式不需要修改原始数据，适合动态生成区间的场景。

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