Добавление нескольких наборов данных и цветов, не назначаемых в ng2-диаграммах - PullRequest
Новая
       81

Добавление нескольких наборов данных и цветов, не назначаемых в ng2-диаграммах

0 голосов
/ 04 апреля 2020

Я создаю приложение, в котором я могу устанавливать параметры на странице, и эти параметры собирают наборы данных, чтобы их можно было визуализировать в линейном графике.

Данные собираются с сервера с помощью этот метод: 

this.checkedList.forEach(item => {
  var inn = {
    action: item.action,
    moneda: item.moneda
  }

  this.http.post(URL, Object.assign(this.options, inn)).subscribe(data => {
    Object.keys(data).forEach(function(key) {
      if (data[key]["val"] == null) {
        data[key]["val"] = 0;
      } else {
        dataC.push(data[key]["val"])
      }
    })
    var val: Object = {
      data: dataC,
      label: 'Pesos'
    }
    newData.push(val)
    dataC = []
  })
})

this.ChartData = newData
console.log(this.ChartData)

In this.ChartData - массив данных до go на графике. Наборы данных правильно реализованы, так как диаграмма действительно отображает данные, однако цвета для всех графиков серые, например:

enter image description here Если мой массив цветов для ng2- диаграммы выглядят так: 

ChartColors: Array<any> = [{
  backgroundColor: 'rgba(0, 102, 235, 0.3)',
  borderColor: '#1862c6',
  pointBackgroundColor: 'rgba(0, 102, 235, 1)',
  pointBorderColor: '#1862c6',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(0, 102, 235, 0.4)'
}, {
  backgroundColor: 'rgba(235, 78, 54, 0.2)',
  borderColor: '#ff5723',
  pointBackgroundColor: 'rgba(235, 78, 54, 1)',
  pointBorderColor: '#ff5723',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(235, 78, 54, 0.8)'
}, {
  backgroundColor: 'rgba(67, 210, 158, 0.2)',
  borderColor: '#00caac',
  pointBackgroundColor: 'rgba(67, 210, 158, 1)',
  pointBorderColor: '#00caac',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(67, 210, 158, 0.8)'
}]

HTML для диаграммы выглядит следующим образом: 

<div class="chk-block-content widget-body todo-widget">
  <canvas height="100" baseChart [datasets]="ChartData" [labels]="ChartLabels" [options]="ChartOptions" [colors]="ChartColors" [legend]="ChartLegend" [chartType]="ChartType"></canvas>
</div>

По какой причине цвета не задаются на диаграмме ? Я пропускаю записи для массива цветов? Неправильный способ установки наборов данных?

Буду признателен за помощь

1 Ответ

0 голосов
/ 04 апреля 2020

Вы должны изменить способ определения ChartColors. Массив должен содержать один объект, и каждое из его свойств должно быть определено как массив значений. 

ChartColors = [{
  backgroundColor: ['rgba(0, 102, 235, 0.3)', 'rgba(235, 78, 54, 0.2)', 'rgba(67, 210, 158, 0.2)'],
  borderColor: ['#1862c6', '#ff5723', '#00caac'],
  pointBackgroundColor: ['rgba(0, 102, 235, 1)', 'rgba(235, 78, 54, 1)', 'rgba(67, 210, 158, 1)'],
  pointBorderColor: ['#1862c6', '#ff5723', '#00caac'],
  pointHoverBackgroundColor: ['#fff', '#fff', '#fff'],
  pointHoverBorderColor: ['rgba(0, 102, 235, 0.4)', 'rgba(235, 78, 54, 0.8)', 'rgba(67, 210, 158, 0.8)']
}]
...