Я новичок в 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>';
}