ハイチャートxAxisはフォーマッタのコールバックデータを空にします

Question

私は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:{ 
    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プロパティに追加することでした。上記を参照してください。