@wjvcot

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

Я не совсем понимаю, но объясните пожалуйста как можно добавить больше данных для отображения в графике. Как показано здесь при нажатии на кнопку Add datasetдобавляются новые данные. Мне нужно сделать тоже самое, только нужно отобразить рядом еще 3 значения на графике. Только чтобы они отображались вместе с загруженной страницей, без нажатия каких-либо кнопок.

Вот мой график на данный момент, который отображает только одно значение (density) на графике не считая state_time.

ts:

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

    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}) {
  return {
    type: 'bar',
    options: {
      scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    }
    },
    data: {
      labels,
      datasets: [
        {
          label, data,
          fill: false
        }
      ],
    }
  }
}
  • Вопрос задан
  • 58 просмотров
Пригласить эксперта
Ответы на вопрос 1
@assets
Back-end developer
Посмотрите исходный код.
view-source:https://www.chartjs.org/samples/latest/charts/bar/...
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы