ChartJS 4.2.0：正负利润折线图边框与填充色差异化设置

要实现零值以上折线为绿色、零值以下折线为红色，同时负值区域填充红色的效果，核心是利用Chart.js的脚本化选项（Scriptable Options）和填充插件（Filler），以下是优雅的实现方式：

核心思路 #

• 折线颜色：通过脚本化borderColor，逐个判断数据点的y值，正负分别返回对应颜色
• 负值区域填充：使用线性渐变作为填充背景，让渐变分界点精准落在y=0的位置，仅在负值区域显示红色填充

完整代码示例 #

const ctx = document.getElementById('profitChart').getContext('2d');

// 创建线性渐变，精准控制零值位置的填充分界
const createNegativeFillGradient = (chart) => {
  const gradient = ctx.createLinearGradient(0, chart.scales.top.bottom, 0, chart.scales.bottom.top);
  const zeroPixelRatio = chart.scales.top.getPixelForValue(0) / chart.scales.top.height;
  
  // 零值以上区域设为透明
  gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
  gradient.addColorStop(zeroPixelRatio, 'rgba(255, 255, 255, 0)');
  
  // 零值以下区域设为红色半透明
  gradient.addColorStop(zeroPixelRatio, 'rgba(255, 99, 132, 0.2)');
  gradient.addColorStop(1, 'rgba(255, 99, 132, 0.2)');
  
  return gradient;
};

new Chart(ctx, {
  type: 'line',
  plugins: [Chart.plugins.filler], // 启用填充插件
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
    datasets: [{
      label: '利润',
      data: [1200, 1900, -800, -1500, 2200, 1700],
      borderWidth: 2,
      fill: 'origin', // 填充到y=0的原点位置
      // 脚本化设置折线颜色
      borderColor: (context) => {
        const value = context.dataset.data[context.dataIndex];
        return value >= 0 ? 'rgba(75, 192, 192, 1)' : 'rgba(255, 99, 132, 1)';
      },
      // 脚本化设置填充背景色
      backgroundColor: (context) => createNegativeFillGradient(context.chart),
      tension: 0.4 // 折线平滑度
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true, // 确保y轴从0开始
        grid: {
          drawBorder: true
        }
      }
    },
    plugins: {
      filler: {
        propagate: false // 避免填充区域扩散到非负值部分
      }
    }
  }
});

关键细节说明 #

• 脚本化borderColor：每个数据点的颜色由自身y值决定，正负分别返回绿色/红色，实现折线分段变色
• 线性渐变填充：通过getPixelForValue(0)获取y=0对应的像素位置，精准控制渐变分界点，确保只有负值区域显示红色填充
• 填充插件配置：fill: 'origin'指定填充到y=0的位置，propagate: false防止填充区域覆盖正值部分

如果需要更极致的精准度（比如两个跨零数据点之间的线段也分段变色），可以通过计算两点间的零值交点，拆分数据点实现，但上述方案已能满足大部分场景的优雅需求。

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