Chart.js技术咨询：如何连接间隔无数据的两个有效数据点？

嘿，这个需求其实完全可以实现，不用觉得难度大！我来给你分享具体的可行方案：

核心思路 #

通过给无数据月份设置null值，再配合Chart.js的内置配置，就能实现保留无数据月份标签+折线直接连接有效数据点的效果。

步骤1：构造包含空值的数据集 #

把2017/12、2018/01对应的数值设为null，同时x轴标签保留所有月份：

const chartData = {
  labels: ['2017/11', '2017/12', '2018/01', '2018/02'],
  datasets: [{
    label: '业务数据',
    data: [25, null, null, 32], // 无数据的位置填null
    borderColor: '#2196F3',
    backgroundColor: 'rgba(33, 150, 243, 0.1)',
    fill: false,
    tension: 0.1 // 可选，设置折线平滑度
  }]
};

步骤2：开启spanGaps配置 #

这是实现折线跨空值连接的关键！在图表配置里开启elements.line.spanGaps：

const chartOptions = {
  scales: {
    x: {
      // 这里可以保留默认设置，x轴会自动渲染所有labels里的月份
      ticks: {
        rotation: 45 // 可选，旋转标签避免重叠
      }
    },
    y: {
      beginAtZero: true // 可选，让y轴从0开始
    }
  },
  elements: {
    line: {
      spanGaps: true // 开启后，折线会跳过null值直接连接前后有效数据点
    }
  }
};

效果说明 #

• x轴会完整显示2017/11、2017/12、2018/01、2018/02四个月份的标签
• 折线会直接连接2017/11和2018/02的有效数据点，不会在无数据月份处断开或显示空点
• 无数据的月份不会有任何数据标记（点或折线片段）

如果有多个数据集，你可以给每个数据集单独设置spanGaps，或者在全局options里统一配置，灵活度很高。

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