Chart.js：如何根据数据值设置showLine的显示状态

嘿，这个需求其实不难实现，Chart.js虽然文档里没直接提，但可以通过脚本化线段配置或者拆分数据集来搞定，我给你两种实用方案：

方案1：利用脚本化线段选项（Chart.js 3.x+推荐） #

这是最简洁的方法，直接在原数据集上通过脚本化配置控制每一段线条的显示逻辑——只有当相邻两个数据点的值都高于10时，才显示它们之间的线条。

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'My Data',
      data: [12, 9, 15, 8, 11, 7],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      pointBackgroundColor: 'rgba(75, 192, 192, 1)',
      pointBorderColor: '#fff',
      pointRadius: 5
    }]
  },
  options: {
    elements: {
      line: {
        segments: {
          // 脚本化控制线段是否显示
          display: context => {
            const currentVal = context.chart.data.datasets[context.datasetIndex].data[context.pointIndex];
            const nextVal = context.chart.data.datasets[context.datasetIndex].data[context.pointIndex + 1];
            // 仅当当前点和下一个点都大于10时，显示线段
            return currentVal > 10 && nextVal > 10;
          }
        }
      }
    }
  }
});

这个方法的优势是不需要修改原始数据，所有数据点都会正常显示，只是不符合条件的线段会被隐藏，视觉效果完全符合你的要求。

方案2：拆分数据集（兼容Chart.js旧版本） #

如果你还在使用Chart.js 2.x版本，没法用segments选项，可以通过拆分数据集的方式实现：把连续高于10的点单独做成一个showLine: true的数据集，低于/等于10的点做成showLine: false的数据集，这样就能保证只有符合条件的点之间有线条。

// 工具函数：按阈值拆分数据生成多个数据集
function splitDataByThreshold(data, threshold) {
  const datasets = [];
  let currentHighGroup = [];
  let currentHighIndices = [];

  for (let i = 0; i < data.length; i++) {
    const val = data[i];
    if (val > threshold) {
      currentHighGroup.push(val);
      currentHighIndices.push(i);
    } else {
      // 处理之前积累的高值组
      if (currentHighGroup.length > 0) {
        const datasetData = new Array(data.length).fill(null);
        currentHighIndices.forEach(idx => datasetData[idx] = currentHighGroup[currentHighIndices.indexOf(idx)]);
        datasets.push({
          label: 'My Data',
          data: datasetData,
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          pointBackgroundColor: 'rgba(75, 192, 192, 1)',
          pointBorderColor: '#fff',
          pointRadius: 5,
          showLine: true
        });
        currentHighGroup = [];
        currentHighIndices = [];
      }
      // 添加当前低值点的数据集
      const datasetData = new Array(data.length).fill(null);
      datasetData[i] = val;
      datasets.push({
        label: 'My Data',
        data: datasetData,
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        pointBackgroundColor: 'rgba(75, 192, 192, 1)',
        pointBorderColor: '#fff',
        pointRadius: 5,
        showLine: false
      });
    }
  }

  // 处理最后一组高值数据
  if (currentHighGroup.length > 0) {
    const datasetData = new Array(data.length).fill(null);
    currentHighIndices.forEach(idx => datasetData[idx] = currentHighGroup[currentHighIndices.indexOf(idx)]);
    datasets.push({
      label: 'My Data',
      data: datasetData,
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      pointBackgroundColor: 'rgba(75, 192, 192, 1)',
      pointBorderColor: '#fff',
      pointRadius: 5,
      showLine: true
    });
  }

  return datasets;
}

// 初始化图表
const originalData = [12, 9, 15, 8, 11, 7];
const datasets = splitDataByThreshold(originalData, 10);

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: datasets
  }
});

这种方法虽然需要处理数据，但能兼容旧版本的Chart.js，视觉效果和方案1一致。

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