Угловая Highcharts динамическая ось X не работает - PullRequest
0 голосов
/ 17 мая 2018

Как создать динамическую ось 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 показывает пустой

Результат: img

1 Ответ

0 голосов
/ 27 декабря 2018

Вы можете попробовать метод диаграммы setCategories, как в chart.xAxis[0].setCategories(curr), а затем перерисовать.Я бы обычно устанавливал категории, используя этот метод.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...