Highcharts xAxis labels formatter callback data empty

Question

I'm new to Highcharts and need to use the xAxis.labels.formatter function to generate labels. The problem is that when the formatter function runs, the data is empty. If I click on the legend the data is loaded and the labels are created correctly. I tried using charts.events.load to call the labelFormatter function but still no luck. I basically need to generate the labels after the series data is loaded and the chart has been rendered.

    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';
  }

// FIX

This was fixed by adding an array to the options property and using that as the data for the label formatter function.

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>';
      }

Answer 1

解决方法是将标签数据的数组添加到options属性，请参见上文。