Диаграммы JS в React JS - проблема с отображением данных дважды при изменении цвета - PullRequest
Новая
       17

Диаграммы JS в React JS - проблема с отображением данных дважды при изменении цвета

0 голосов
/ 24 мая 2018

У меня есть приложение реагирования, использующее диаграммы JS, данные извлекаются из API REST / JSON.Моя диаграмма показывает две линейные графики: Линия 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)',
          ],
        } 
      })
    }

Предполагаю, что с моим синтаксисом / настройкой должно быть что-то не так, могу ли я получить некоторую помощь, пожалуйста?

1 Ответ

0 голосов
/ 24 мая 2018

В первом примере вы используете условное обозначение для отображения метки: 

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

Дайте мне знать, если это сработает

...