Я не совсем понимаю, но объясните пожалуйста как можно добавить больше данных для отображения в графике. Как показано
здесь при нажатии на кнопку
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
}
],
}
}
}