求助：基于Code Repository实现Workshop模块动态彩色折线图

核心逻辑是不要把整个折线作为单一元素渲染，而是拆分每两个相邻数据点之间的线段，根据前后点的数值变化给每段单独上色：

步骤拆解 #

• 遍历数据数组，从第2个元素开始，逐个和前一个元素对比
• 判定规则：
  • 当前点数值 > 前一个点 → 线段用绿色（#00aa00）
  • 当前点数值 < 前一个点 → 线段用红色（#aa0000）
  • 两者相等 → 线段用黑色（#000000）
• 每判定一组，就单独绘制这段带颜色的线段

原生Canvas实现示例 #

假设你的数据是类似 const data = [12, 15, 13, 13, 18, 16] 的数值数组，x轴按索引均匀分布：

const canvas = document.getElementById('lineChart');
const ctx = canvas.getContext('2d');
const data = [12, 15, 13, 13, 18, 16];
const pointWidth = 50; // 每个点的x轴间距
const baseY = 200; // 基线y坐标
const scale = 10; // 数值到像素的缩放比例

// 遍历绘制每一段线段
for(let i = 1; i < data.length; i++) {
  const prevX = (i-1)*pointWidth;
  const prevY = baseY - data[i-1]*scale;
  const currX = i*pointWidth;
  const currY = baseY - data[i]*scale;

  // 判断颜色
  let lineColor = '#000000';
  if(data[i] > data[i-1]) {
    lineColor = '#00aa00';
  } else if(data[i] < data[i-1]) {
    lineColor = '#aa0000';
  }

  // 绘制线段
  ctx.beginPath();
  ctx.strokeStyle = lineColor;
  ctx.lineWidth = 2;
  ctx.moveTo(prevX, prevY);
  ctx.lineTo(currX, currY);
  ctx.stroke();

  // 可选：绘制数据点
  ctx.fillStyle = '#333';
  ctx.beginPath();
  ctx.arc(prevX, prevY, 3, 0, Math.PI*2);
  ctx.fill();
}
// 绘制最后一个点
ctx.fillStyle = '#333';
ctx.beginPath();
ctx.arc(data.length*pointWidth - pointWidth, baseY - data[data.length-1]*scale, 3, 0, Math.PI*2);
ctx.fill();

适配可视化库的思路 #

如果你用的是ECharts、Chart.js这类库，核心逻辑一样，只是语法不同：

• ECharts：可以拆分多个series.line，每个series对应一段线段并设置对应颜色；或者利用series.line.lineStyle.color的回调函数，基于前后数据点判断颜色
• Chart.js：使用scriptable options，在borderColor回调里根据当前索引和前一个数据点的数值差返回对应颜色

比如Chart.js的简化示例：

new Chart(document.getElementById('chart'), {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [{
      data: [12, 15, 13, 13, 18, 16],
      borderWidth: 2,
      pointRadius: 3,
      // 动态设置每段线段颜色
      borderColor: function(context) {
        const index = context.dataIndex;
        if(index === 0) return '#000'; // 第一个点无前置线段，默认黑色
        const prevVal = context.dataset.data[index-1];
        const currVal = context.dataset.data[index];
        if(currVal > prevVal) return '#00aa00';
        if(currVal < prevVal) return '#aa0000';
        return '#000';
      }
    }]
  },
  options: {
    elements: { line: { tension: 0 } } // 禁用曲线，保留折线样式
  }
});

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