如何基于前值变更Chart.js折线图的线段颜色？

需求与问题 #

需要实现Chart.js折线图的线段根据相邻数据点的大小动态变色：

• 当前数据值大于前一个值（折线上升），线段显示绿色
• 当前数据值小于前一个值（折线下降），线段显示红色

之前通过设置固定阈值的渐变方式实现，效果不符合预期，现有代码如下：

const threshold = 97.5;

new Chart('myChart', {
  type: 'line',
  plugins: [{
    afterLayout: chart => {
      let ctx = chart.chart.ctx;
      ctx.save();
      let yAxis = chart.scales["y-axis-0"];
      let yThreshold = yAxis.getPixelForValue(threshold);          
      let gradient = ctx.createLinearGradient(0, yAxis.top, 0, yAxis.bottom);   
      gradient.addColorStop(0, 'green'); 
      let offset = 1 / yAxis.bottom * yThreshold; 
      gradient.addColorStop(offset, 'green'); 
      gradient.addColorStop(offset, 'red'); 
      gradient.addColorStop(1, 'red');           
      chart.data.datasets[0].borderColor = gradient;
      ctx.restore();
    }
  }],
  data: {
    labels: ['1', '2', '3', '4', '5', '6','7', '8', '9','10', '11', '12','13', '14', '15','16', '17', '18','19', '20', '21','22', '23'],
    datasets: [{
      label: 'My Dataset',
      data: [97.5, 98, 99.2, 98.2, 97, 98, 98.5,97.5, 98, 99.2, 98.2, 97, 98, 98.5,97.5, 98, 99.2, 98.2, 97, 98, 98.5,98, 98.1 ],
      fill: false
    }]
  },
  options: {
    legend: {
      display: false
    }
  }
});

解决方案 #

要实现相邻线段的动态变色，需放弃全局渐变方式，改用afterDraw钩子手动绘制每一段折线，通过比较相邻数据点的数值设置线段颜色。修改后的完整代码如下：

new Chart('myChart', {
  type: 'line',
  plugins: [{
    afterDraw: chart => {
      const ctx = chart.ctx;
      const dataset = chart.data.datasets[0];
      const xAxis = chart.scales['x-axis-0'];
      const yAxis = chart.scales['y-axis-0'];
      
      ctx.save();
      // 匹配原数据集的线段样式
      ctx.lineWidth = dataset.borderWidth || 2;
      ctx.lineCap = 'round';
      
      // 遍历数据点，逐段绘制折线
      for (let i = 1; i < dataset.data.length; i++) {
        const prevValue = dataset.data[i - 1];
        const currValue = dataset.data[i];
        
        // 将数据值转换为画布坐标
        const prevX = xAxis.getPixelForValue(i - 1);
        const prevY = yAxis.getPixelForValue(prevValue);
        const currX = xAxis.getPixelForValue(i);
        const currY = yAxis.getPixelForValue(currValue);
        
        // 根据数值变化设置线段颜色
        ctx.strokeStyle = currValue > prevValue ? '#00ff00' : '#ff0000';
        
        // 绘制当前线段
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.stroke();
      }
      ctx.restore();
    }
  }],
  data: {
    labels: ['1', '2', '3', '4', '5', '6','7', '8', '9','10', '11', '12','13', '14', '15','16', '17', '18','19', '20', '21','22', '23'],
    datasets: [{
      label: 'My Dataset',
      data: [97.5, 98, 99.2, 98.2, 97, 98, 98.5,97.5, 98, 99.2, 98.2, 97, 98, 98.5,97.5, 98, 99.2, 98.2, 97, 98, 98.5,98, 98.1 ],
      fill: false,
      borderColor: 'transparent', // 禁用原数据集的边框绘制，避免重叠
      borderWidth: 2
    }]
  },
  options: {
    legend: {
      display: false
    }
  }
});

关键说明 #

• 利用afterDraw钩子在图表绘制完成后，通过Canvas API手动绘制每一段线段
• 通过getPixelForValue方法将数据值转换为画布上的坐标点
• 逐段比较相邻数据点的数值，动态设置线段的strokeStyle
• 将原数据集的borderColor设为transparent，避免系统自动绘制的线段和手动绘制的线段重叠

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