Как создать динамическую ось X и как визуализировать в диаграммах,
Package.json
Используемая версия
enter code here"angular-highcharts": "5.2.12"
app.module.ts
импорт модуля старшей диаграммы в модуль приложения
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: highchartsModules
},
]
app.component.ts
Создание динамической оси X с помощью json, но ось X отображается пустой.
import { Chart,Highcharts } from 'angular-highcharts';
public adherenceData = new Chart({
chart: {
type: 'column'
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
categories: [],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Percentage'
}
},
legend:{
enabled:false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series:{
dataLabels: {
enabled: true,
rotation: 0,
color: '#000000',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 0, // 10 pixels down from the top
x: 0,
style: {
fontSize: '12px'
}
}
},
},
series: []
}
);
let cArr=[]
response.payload.forEach((e,i)=>{
crArr.push(e.username)
this.adherenceData.addSerie({'name': e.username,'data':[e.visitAdherence]} , true,{
duration: 2000,
easing: 'easeOutBounce'
})
В CArr значения для оси x сдвигаются и переходят к оси x
категория
this.adherenceData.options.xAxis[0].categories = cArr;
this.adherenceData.ref.redraw();
})
В результате img x-axis показывает пустой
Результат: