React JS 中的 JS 图表 - 修改颜色时数据显示两次的问题

Question

我有一个使用 JS 图表的反应应用程序，数据是从 REST/JSON API 中提取的。我的图表显示两个折线图：第 1 行(原始和第 2 行(修改。我希望原始和修改后都显示各自的颜色。

我的原始代码没有颜色 -结果：折线图以灰色显示原始代码和修改后的代码：

const data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
datasets: this.state.chartData.map((data, index) => { 
return { 
data,
label: index === 0 ? 'Original' : 'Modified'
} 
})
}

我尝试添加/更改颜色 - 结果：修改显示两次，原始显示不显示 - ：

const data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
datasets: this.state.chartData.map((data, index) => { 
return { 
data,
label: 'Original',
backgroundColor:[ 
'rgba(0,255,255,1)',
],
label: 'Modified',
backgroundColor:[ 
'rgba(0,0,255,1)',
],
} 
})
}

假设我的语法/设置一定有问题，我可以得到一些帮助吗？

Answer 1

在第一个示例中，您使用条件来显示标签：

label: index === 0 ? 'Original' : 'Modified'

所以我假设你必须对背景颜色做同样的事情：

backgroundColor: index === 0 ? ['rgba(0,255,255,1)'] : ['rgba(0,0,255,1)']

将它们放在一起，您将拥有：

return { 
data,
label: index === 0 ? 'Original' : 'Modified',
backgroundColor: index === 0 ? ['rgba(0,255,255,1)'] : ['rgba(0,0,255,1)']
}

让我知道这是否有效