角度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，然后重绘。 我通常会使用这种方法设置类别。