Chart.js实现正负值折线图不同边框颜色的问题

问题根源 #

你现在用dataset.segment.borderColor设置颜色时，两个一负一正的数据点之间的整条线段会被统一设成一种颜色，但你要的是线段跨0的时候，负的部分红，正的部分绿——默认的segment逻辑是按两个数据点之间的整段来处理的，做不到这种拆分着色。

解决办法：给数据插中间点 #

通过预处理原始数据，在每对跨越0的相邻点之间插入一个y=0的中间点，把原线段拆成两段（负到0、0到正），这样每段线段就只在0的一侧，就能正确匹配颜色规则了。

第一步：写个数据预处理函数 #

遍历原始数据，检测相邻点是否跨0，要是跨了就算出y=0对应的x位置，插进去：

const processData = (originalData) => {
  const processed = [];
  for (let i = 0; i < originalData.length; i++) {
    processed.push(originalData[i]);
    // 检查当前点和下一个点是否一个正一个负
    if (i < originalData.length - 1) {
      const curr = originalData[i];
      const next = originalData[i + 1];
      if ((curr.y < 0 && next.y > 0) || (curr.y > 0 && next.y < 0)) {
        // 用线性插值算y=0时的x值
        const x0 = curr.x + (next.x - curr.x) * (-curr.y) / (next.y - curr.y);
        processed.push({ x: x0, y: 0 });
      }
    }
  }
  return processed;
};

第二步：配置segment颜色回调 #

在dataset里，用segment.borderColor的回调函数，根据线段两端的y值判断颜色：

datasets: [
  {
    data: processData(yourOriginalData), // 用预处理后的数据
    segment: {
      borderColor: (context) => {
        const { p0, p1 } = context;
        // 两端都负或等于0就红，都正或等于0就绿
        if (p0.y <= 0 && p1.y <= 0) return 'red';
        if (p0.y >= 0 && p1.y >= 0) return 'green';
        return 'gray'; // 插了中间点后基本不会走到这
      }
    },
    // 其他配置（比如fill、borderWidth之类的）按需添加
  }
]

原理说明 #

插了中间点之后，原本跨0的单条线段被拆成了两条：一条从原负点连到(0,x0)，另一条从(0,x0)连到原正点。这时候每条线段的两端y值都在0的同一侧，segment的颜色回调就能精准给每段设置对应颜色，完全符合你要的效果。

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