Chart.js折线图如何设置上涨段为绿色、下跌段为红色

核心逻辑：Chart.js 原生不支持单折线跨段自动配色，不需要额外引入插件，直接把原始单条折线拆分为相邻两点组成的独立短折线段，逐段对比价格判断涨跌设置对应颜色即可，你现有的3天/1周/1个月周期切换逻辑不需要改动，仅需调整数据集生成方式。

1. 编写分段数据集生成函数 #

把你原始的时间标签数组、对应周期的收盘价格数组传入，自动逐段判断涨跌生成对应配色的短段数据集：

/**
 * 生成涨跌分段配色的折线数据集
 * @param {Array} labels 对应周期的X轴时间标签
 * @param {Array} closePrices 对应周期的收盘价格数组
 * @returns 分段后的datasets配置
 */
const generateSegmentedLineData = (labels, closePrices) => {
  const segmentDatasets = [];
  // 遍历所有相邻价格对，每对价格生成一段独立折线
  for (let i = 0; i < closePrices.length - 1; i++) {
    const prev = closePrices[i];
    const current = closePrices[i + 1];
    // 涨跌颜色判断：上涨绿、下跌红、横盘灰
    let borderColor = 'rgba(148, 163, 184, 0.9)';
    if (current > prev) borderColor = 'rgba(22, 163, 74, 1)';
    if (current < prev) borderColor = 'rgba(220, 38, 38, 1)';

    segmentDatasets.push({
      // 仅第一段设置图例名称，避免生成重复图例
      label: i === 0 ? 'Nifty50 收盘价' : '',
      data: [
        { x: labels[i], y: prev },
        { x: labels[i + 1], y: current }
      ],
      borderColor,
      borderWidth: 2,
      // 仅首尾点显示圆点，中间段点隐藏避免视觉重叠
      pointRadius: i === 0 || i === closePrices.length - 2 ? 3 : 0,
      pointHoverRadius: 4,
      tension: 0.1 // 和你原折线的曲线弧度保持一致即可
    });
  }
  return segmentDatasets;
};

2. 对接现有周期切换逻辑 #

你在切换3天/1周/1个月周期时，本来就会过滤出对应周期的labels和closePrices数据，直接把两个参数传入上面的函数，把返回结果赋值给Line组件的data.datasets即可，删掉原来单条数据集里写死的borderColor: 'rgba(75,192,192,1)'配置。

3. 配置项兼容调整 #

为了避免分段导致的tooltip重复、图例点击异常问题，在你原有的options配置里补充以下内容即可：

const options = {
  // 你原有的responsive、scales等配置全部保留
  plugins: {
    // 保留你原有的title等配置，补充以下内容
    tooltip: {
      // 过滤掉无label的分段数据，避免tooltip弹出多条重复记录
      filter: (item) => item.dataset.label !== '',
      callbacks: {
        label: (ctx) => `收盘价: ${ctx.parsed.y.toFixed(2)}`
      }
    },
    legend: {
      // 拦截图例点击事件，避免点击图例只隐藏第一段折线
      onClick: (e) => e.native.stopPropagation(),
    }
  }
};

补充说明 #

• 如果需要实现折线下方区域填充效果，不要给分段数据集开fill: true，单独加一条全量透明数据集放在所有分段数据集的最底层做填充即可，不会影响分段配色效果。
• 该方案兼容Chart.js v3/v4、react-chartjs-2 v4+版本，不需要安装额外依赖。

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