基于angular-chart的ChartJS多线型：仅单数据集设置连线间隙

Chart.js 的 spanGaps 配置项支持全局、单数据集两个层级独立配置，不需要自定义渲染逻辑，通过「全局默认配置+单数据集参数覆盖」的模式，就能实现仅带阻滤波器曲线带连线间隙、其余9条曲线保持连续连线的效果，完全不会互相干扰。

具体调整步骤 #

• 梳理配置优先级逻辑：Chart.js 渲染时，单数据集层级的配置优先级高于全局 elements 节点下的通用配置，单独给某条曲线设置的参数只会作用在当前数据集上。
• 明确间隙触发逻辑：当数据点值为 null 时，若当前数据集配置 spanGaps: false，相邻两段折线会在该null点位置自动断开形成间隙；若配置 spanGaps: true，折线会跨过null点保持连续。

1. 重构数据结构 #

把原来纯二维点数组的 $scope.data，替换为标准的数据集对象数组，给每个条目单独配置连线规则：

$scope.datasets = [
  // 前9个常规连续连线的滤波器数据集：统一配置spanGaps: true保证连续
  { data: [{x:-100,y:-90},{x:-60,y:-10},{x:-50,y:0}], spanGaps: true, borderColor: '#对应曲线色值', fill: false },
  { data: [{x:-100,y:-80},{x:-50,y:-20},{x:0,y:0}], spanGaps: true, borderColor: '#对应曲线色值', fill: false },
  // 其余7个常规数据集沿用相同配置即可
  // 第10个带阻类型数据集：单独配置spanGaps: false制造间隙
  {
    data: [
      {x:-100,y:0},
      {x:带阻中心频率位置, y:null}, // 阻带位置插入null点，触发间隙
      {x:0,y:-100}
    ],
    spanGaps: false, // 仅作用于当前带阻曲线
    borderColor: '#带阻曲线专属色值',
    fill: false
  }
]

2. 调整全局配置 #

保留原有所有通用渲染参数，不在全局层级设置 spanGaps 配置，避免全局规则覆盖单数据集的自定义配置：

$scope.options = {
  tooltips: { enabled: false },
  elements: {
    point: { radius: 0 },
    line: {
      tension: .25,
      fill: false
      // 此处不设置spanGaps参数，交由各数据集自行配置
    }
  },
  // 原有对数X轴、线性Y轴的配置完全保留，无需修改
}

落地注意事项 #

• 不要把 spanGaps 写在全局 elements.line 节点下，否则会对所有数据集生效，失去单条曲线定制的能力。
• 你当前使用的angular-chart封装，原生支持识别数据集对象的独立配置，只要把绑定的数据源从纯点数组替换为上述结构，不需要修改封装层的核心逻辑就能生效。
• 如果带阻曲线的间隙位置已经在原有采样逻辑中标记完成，只需要给对应数据集单独设置 spanGaps: false 即可，不需要改动其他数据集的采样点计算逻辑。

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