J'ai besoin de tracer l' historique d'exécution d'une tâche dans Highcharts. Il doit montrer cet historique d'exécution des tâches sous forme de barre horizontale. Il y a des exigences supplémentaires que j'ai ajoutées en tant que mise à jour ci-dessous. Récemment, j'ai découvert que cette invertedoption n'est pas prise en charge dans StockChart et que seuls le navigateur et rangeSelector sont disponibles dans StockChart. Par conséquent, j'utilise ces fonctions.
Donc, pour répondre à l'exigence, j'ai créé quelque chose de similaire à cet exemple de jsfiddle (trouvé quelque part pendant la navigation, je ne me souviens pas de la source) et j'ai fini avec ce lien de plunker avec l'aide de ma question précédente , grâce à Pawel Fus
Mettre à jour la question pour éviter toute confusion
Exigences supplémentaires:
Afficher uniquement les tâches qui ont couru dans un particulier la date et la plage horaire . Au cas où il y aurait trop d'exécutions, par exemple plus de 10 exécutions, il doit y avoir un moyen d'afficher uniquement 10 tâches visiblement avec un axe y qui peut faire défiler pour afficher d'autres tâches. lien plunker vers le problème
Explication du problème du plunker ci-dessus.
Si vous vérifiez la capture d'écran ci-dessous à partir de plunker ci-dessus, la plage de temps est de 12/12/2014 09:32:26à 12/12/2014 10:32:26et il n'y a que 2 tâches qui ont exécuté m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& m_ZIG2_HCP_MERGE_IB_CN. Cependant, je peux voir une autre tâche entre les deux LILLY_Cqui n'a même pas été exécutée 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 sous cette plage de dates)
Aussi, si vous remarquez dans le coin inférieur droit le temps passé de 09:38à 19:20. 19:20est l'heure de fin de la m_ZIG2_HCP_MERGE_IB_CNtâ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
};