Как сгруппировать несколько баров на графике, как это сделано
здесь ? То есть, предположим, что у меня есть значение
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
}
]
}
}
}
}