Highcharts xAxis помечает данные обратного вызова средства форматирования пустыми

Я новичок в Highcharts, и мне нужно использовать функцию xAxis.labels.formatter для создания меток. Проблема в том, что при запуске функции форматирования данные пусты. Если я нажимаю на легенду, данные загружаются и метки создаются правильно. Я попытался использовать charts.events.load для вызова функции labelFormatter, но все равно не повезло. Мне в основном нужно сгенерировать метки после загрузки данных серии и визуализации диаграммы.

    chart: {
        type: 'line',
        backgroundColor: '#eee',
        events: {
            load: function () {
                console.log(this);
                this.xAxis[0].labelFormatter();
            }
        }
    },
    xAxis: {
        categories: [],
        labels: {
          formatter: formatVehicleConversionLabels,
          useHTML: true
        }
    },
    ...

  function formatVehicleConversionLabels() {
    //console.log(this);
    var month = this.value;
    var totalConnectedVehiclesValue = null;
    var notificationsValue = null;
    var downloadsValue = null;
    var installationsValue = null;
    for(var i = 0; i < this.chart.series.length; i++) {
      var currentSeries = this.chart.series[i];
      if(currentSeries.name === "Total Connected Vehicles") {
        if(currentSeries.data.length > 0) {
          for(var j = 0; j < currentSeries.data.length; j++) {
            var currentData = currentSeries.data[j];
            if(currentData.category === month) {
              totalConnectedVehiclesValue = currentData.y;
            }
          }
        }
      }
      if(currentSeries.name === "Notifications") {
        if(currentSeries.data.length > 0) {
          for(var j = 0; j < currentSeries.data.length; j++) {
            var currentData = currentSeries.data[j];
            if(currentData.category === month) {
              notificationsValue = currentData.y;
            }
          }
        }
      }
      if(currentSeries.name === "Downloads") {
        if(currentSeries.data.length > 0) {
          for(var j = 0; j < currentSeries.data.length; j++) {
            var currentData = currentSeries.data[j];
            if(currentData.category === month) {
              downloadsValue = currentData.y;
            }
          }
        }
      }
      if(currentSeries.name === "Installations") {
        if(currentSeries.data.length > 0) {
          for(var j = 0; j < currentSeries.data.length; j++) {
            var currentData = currentSeries.data[j];
            if(currentData.category === month) {
              installationsValue = currentData.y;
            }
          }
        }
      }
    }
    return '<table class="x-axis"><tr><th>' + this.value + '</th></tr>' +
    '<tr><td>' + totalConnectedVehiclesValue + '</td></tr>' +
    '<tr><td>' + notificationsValue + '</td></tr>' +
    '<tr><td>' + downloadsValue + '</td></tr>' +
    '<tr><td>' + installationsValue + '</td></tr></table';
  }

// ИСПРАВИТЬ

Это было исправлено путем добавления массива к свойству options и использования его в качестве данных для функции форматирования меток.

options:{
  labelData: [],
  ...
  angular.forEach(vm.downloadAndInstallationRateChartConfig.options.xAxis.categories, function(d, i) {
        vm.downloadAndInstallationRateChartConfig.options.labelData.push({
          col: d,
          successfulDownloads: successfulDownloadsData[i],
          successfulInstallations: successfulInstallationsData[i]
        });
      });

      function formatDownloadAndInstallationRateLabels() {
        var labelData = null;
        for(var i = 0; i < this.chart.options.labelData.length; i++) {
          if(this.chart.options.labelData[i].col === this.value) {
            labelData = this.chart.options.labelData[i];
          }
        }
        return '<span style="margin-bottom: 20px; display: inline-block; font-size: 12px;">'+this.value+'</span><br />'+
        '<span style="margin-top: 1px; display: inline-block; font-size: 12px;">'+labelData.successfulDownloads+'</span><br />'+
        '<span style="margin-top: 1px; display: inline-block; font-size: 12px;">'+labelData.successfulInstallations+'</span>';
      }

person neridaj    schedule 05.05.2016    source источник
comment
Не могли бы вы воспроизвести свой пример в виде живой демонстрации на jsfiddle.net?   -  person Sebastian Bochan    schedule 05.05.2016


Ответы (1)


Исправление заключалось в добавлении массива для данных метки в свойство options, см. Выше.

person neridaj    schedule 13.05.2016