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

我尝试添加/更改颜色 - 结果：修改显示两次＆amp;原件不显示 - ：

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图表 - 数据问题在修改颜色时显示两次

1 个答案: