React中JS Charts颜色设置问题：原始数据消失、修改数据重复

我明白你遇到的麻烦了——你在给两条折线设置颜色时，不小心在同一个对象里重复定义了label属性，这直接导致后面的label: 'Modified'覆盖了前面的Original，再加上map遍历每个数据项时都生成了同样的配置，自然就只显示两条Modified折线，Original彻底消失了。

错误原因分析 #

你尝试的代码里，每个map返回的对象同时存在两个label和backgroundColor：

return {
  data,
  label: 'Original',
  backgroundColor:[ 'rgba(0,255,255,1)', ],
  label: 'Modified', // 这里会覆盖前面的Original标签
  backgroundColor:[ 'rgba(0,0,255,1)', ], // 同样覆盖前面的颜色配置
}

在JavaScript对象中，重复的键会被最后一个值覆盖，所以每个数据集最终的标签都是Modified，颜色也都是蓝色，这就出现了你看到的错误效果。

正确的配置代码 #

我们需要根据index来区分两个数据集，分别设置对应的标签和颜色。另外，折线图的线条颜色主要由borderColor控制，backgroundColor一般用于填充区域，所以建议同时设置这两个属性：

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
  datasets: this.state.chartData.map((data, index) => {
    // 根据索引判断当前是原始数据还是修改后数据
    const isOriginal = index === 0;
    return {
      data,
      label: isOriginal ? 'Original' : 'Modified',
      borderColor: isOriginal ? 'rgba(0,255,255,1)' : 'rgba(0,0,255,1)',
      backgroundColor: isOriginal ? 'rgba(0,255,255,0.2)' : 'rgba(0,0,255,0.2)', // 填充区域用半透明色更美观
      fill: false, // 关闭填充，只显示折线
      tension: 0.1 // 可选参数：让折线线条更平滑
    }
  })
}

额外说明 #

请确保this.state.chartData是一个包含两个数组的结构，比如：

// 示例数据结构
this.state = {
  chartData: [
    [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], // Original数据
    [15, 25, 35, 45, 55, 65, 75, 85, 95, 105, 115, 125]  // Modified数据
  ]
}

这样map遍历后会生成两个独立的数据集，分别对应Original和Modified的折线，颜色也会正确显示。

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