@kisey

Как отобразить два или более баров на графике?

Как сгруппировать несколько баров на графике, как это сделано здесь ? То есть, предположим, что у меня есть значение state_time в метках, как сделать так чтобы отобразить столбцы density и visconsity для этого значения в графике? На данный момент мой график отображает только значение density для метки state_time на графике, а как добавить чтобы еще отображалось и visconsity? Я пробовал его добавить данное значение в график, но в label отображается все время undefined, а саму информацию для него вообще не отображает.

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { StateService } from '../../../shared/services/state.service';
import { State } from '../../../shared/interfaces';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements AfterViewInit {

  @Input('reports_id') reports_id: string
  @ViewChild('state') stateRef: ElementRef

  constructor(
    private stateService: StateService
  ) { }


  ngAfterViewInit() {
    const stateConfig: any = {
      label: 'Density',
      backgroundColor: '#009688',
      borderColor: '#00796b'
    }

    this.stateService.fetch(this.reports_id).subscribe((data: State[]) => {
      stateConfig.data = data.map(item => item.density)
      stateConfig.labels = data.map(item => item.state_time)
      const stateCtx = this.stateRef.nativeElement.getContext('2d')
      new Chart(stateCtx, createChartConfig(stateConfig))
    }
  )
  }
function createChartConfig({labels, data, label, borderColor, backgroundColor}) {
  return {
    type: 'bar',
    options: {
      scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        }]
    }},
    data: {
      labels,
      datasets: [
        {
          label, data, 
          backgroundColor: backgroundColor,
          borderColor: borderColor,
          borderWidth: 1
        }
      ]
    }
  }
}
}
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы