Comment créer un graphique de plage de colonnes dans Highcharts à l'aide des fonctions de plage et de navigateur?
J'ai une obligation de tracer l'historique d'exécution d'une tâche dans Highcharts. Il doit montrer que l'historique des tâches est exécuté sous forme de barre horizontale. Il y a des exigences supplémentaires que j'ai ajoutées comme mise à jour ci-dessous. Récemment, j'ai découvert que l'option inverted n'est pas prise en charge dans StockChart et que seuls navigateur & rangeSelector sont disponibles dans StockChart. Par conséquent, j'utilise ces fonctions.
Donc, pour atteindre l'exigence, j'ai créé quelque chose de similaire à cet exemple jsfiddle (trouvé quelque part pendant la navigation, je ne me souviens pas de la source) et je me suis retrouvé avec ce lien plongeur avec de l'aide de mon précédent question , grâce à Pawel Fus
Mise à jour de la question pour éviter toute confusion
Exigences supplémentaires:
Afficher uniquement les tâches qui ont été exécutées dans un cas particulier date et plage horaire . Dans le cas où il y a trop d'exécutions, telles que plus de 10 exécutions, il doit y avoir un moyen d'afficher uniquement 10 tâches visiblement avec un axe y qui peut défiler pour afficher d'autres tâches. lien plongeur vers le problème
Explication du problème du plongeur ci-dessus.
Si vous vérifiez la capture d'écran ci-dessous depuis le plongeur ci-dessus, la plage de temps est de 12/12/2014 09:32:26 à 12/12/2014 10:32:26 et seulement 2 tâches ont été exécutées m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB & m_ZIG2_HCP_MERGE_IB_CN. Cependant, je peux voir une autre tâche entre LILLY_C qui n'a même pas fonctionné dans cette plage de dates. (Dans les données réelles, il y a plus de 10 tâches qui encombrent ce graphique qui ne tombe même pas dans cette plage de dates)
De plus, si vous remarquez en bas à droite, l'heure est passée de 09:38 à 19:20. 19:20 est l'heure de fin de m_ZIG2_HCP_MERGE_IB_CN tâche. 
Voici mes options de graphique
var chart_options = {
chart: {
renderTo: 'container',
height: 600
},
title: {
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
gridLineWidth: 1,
tickInterval: 1 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%b %e, %Y'
}
},
yAxis: {
tickInterval: 1,
gridLineWidth: 1,
labels: {
formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Task'
}
},
rangeSelector: {
selected: 0,
buttons: [ {
type: "minute",
count: 60,
text: "1h"
}, {
type: "minute",
count: 180,
text: "3h"
}, {
type: "minute",
count: 300,
text: "5h"
}],
inputDateFormat: '%m/%d/%Y %H:%M:%S',
inputEditDateFormat: '%m/%d/%Y %H:%M:%S',
inputBoxWidth: 120
},
navigator: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
shared: false,
formatter: function() {
var str = '';
str += 'Task: ' + this.series.name + '<br>';
str += 'From: ' + Highcharts.dateFormat('%m/%d/%y %H:%M', this.point.from) + '<br>';
str += 'To: ' + Highcharts.dateFormat('%m/%d/%y %H:%M', this.point.to) + '<br>';
return str;
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: true
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
states:{
hover:{
lineWidth:10
}
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var query = '{ "task_id": "'+this.task_id+'","start_time": '+this.from+',"exclude_interval": '+opExcludeMinutes+',"size": 10 }';
$scope.taskName = this.series.name;
$scope.isTaskSelected = false;
$scope.operationalReportAgentTaskHistoryServiceRequest(query);
}
}
}
}
},
series: seriesData
};
Donc après quelques heures de fouille, je viens de découvrir le coupable (ou j'espère vraiment). Le problème est votre définition du formateur d'étiquettes yAxis:
yAxis: {
tickInterval: 1,
gridLineWidth: 1,
labels: {
formatter: function() { // THIS IS THE PROBLEM
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Task'
}
},
Vous ne vérifiez pas réellement si vous devez afficher l'étiquette selon task.intervals (Voir json.js). Une simple mise à jour (Plunker) du formateur semble fonctionner:
yAxis: {
tickInterval: 1,
gridLineWidth: 1,
labels: {
formatter: function () {
console.log("scripts.js - yAxis.labels.formatter", this.value);
if (tasks[this.value]) {
//if (tasks[this.value].name === 'LILLY_C') {
var _xAxis = this.chart.axes[0];
var _task = tasks[this.value];
var _show = false;
// Not optimized for large collections
for (var _i = 0; _i < _task.intervals.length; _i++) {
var _int = _task.intervals[_i];
if (_xAxis.min <= _int.to) {
_show = true;
}
}
console.log("scripts.js - yAxis.labels.formatter",
tasks[this.value].name,
_show,
_xAxis.min,
_xAxis.max,
_task.intervals
);
if (_show) {
return tasks[this.value].name;
} else {
return;
}
//}
//return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Task'
}
},
Voir Plunker pour démo.
La signification des étiquettes yAxis est: Afficher l'étiquette si vous voyez une course dans le graphique ou s'il y a une course à droite de la graph. Veuillez modifier la condition
if (_xAxis.min <= _int.to) {
comme bon vous semble.
Avis de non-responsabilité: Je n'utilise pas les Highcharts, donc cette réponse essaie d'expliquer le problème et non de suggérer une méthode Highcharts pour résoudre le problème.
Leçons apprises:
yaxis-plugin.jsEst sans rapport avec le problème.- Highstock.js est une bibliothèque open-source ( highstock.src.js ). Tout débogage est beaucoup plus facile si vous déboguez le code source d'origine. Le code réduit ajoute une complexité et des devinettes inutiles. J'ai téléchargé la bibliothèque et ajouté quelques
console.log()pour savoir ce qui se passe.