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

Question

我有一个使用 JS 图表的 React 应用程序，数据是从 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'
        } 
      })
    }

我尝试 add/change 颜色-结果：修改显示两次 & 原始不显示-:

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 执行相同的操作：

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

如果可行请告诉我

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

JS charts in React JS - Issue with Data showing twice when modifying color

jscharts

reactjs