0

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

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

4

1 回答 1

0

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

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

让我知道这是否有效

于 2018-05-24T15:12:57.400 回答