Angular Highcharts 动态 x 轴不起作用

Question

如何生成动态x轴以及如何在图表中渲染，

Package.json

使用的版本

enter code here"angular-highcharts": "5.2.12"

app.module.ts

在应用模块中导入highchart模块

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: highchartsModules
    },

  ]

app.component.ts

通过json创建动态x轴，但是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 轴显示为空

结果：

Answer 1

您可以尝试chart.xAxis[0].setCategories(curr) 中的图表方法setCategories，然后重绘。 我通常会使用这种方法设置类别。