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

【问题标题】：JS charts in React JS - Issue with Data showing twice when modifying colorReact JS 中的 JS 图表 - 修改颜色时数据显示两次的问题
【发布时间】：2018-05-24 15:06:32
【问题描述】：

我有一个使用 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)',
          ],
        } 
      })
    }

我假设我的语法/设置一定有问题，请问我可以寻求帮助吗？

【问题讨论】：

标签： reactjs jscharts

【解决方案1】：

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

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

所以我假设你必须对 backgroundColor 做同样的事情：

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)']
}

让我知道这是否有效

【讨论】：

谢谢，您的解决方案帮助我走上了正确的道路。