Tengo un requisito para trazar el historial de ejecución de una tarea en Highcharts. Debe mostrar ese historial de ejecución de las tareas como una barra horizontal. Hay requisitos adicionales que agregué como actualización a continuación. Recientemente descubrí que esa inverted
opción no es compatible con StockChart y que solo el navegador y rangeSelector están disponibles en StockChart. Por lo tanto, estoy usando esas funciones.
Entonces, para lograr el requisito, creé algo similar a este ejemplo de jsfiddle (encontrado en algún lugar mientras navegaba, no recuerdo la fuente) y terminé con este enlace de plunker con la ayuda de mi pregunta anterior , gracias a Pawel Fus
Actualización de la pregunta para evitar confusiones
Requerimientos adicionales:
Muestra solo las tareas que se ejecutaron en una fecha y un intervalo de tiempo en particular . En caso de que haya demasiadas ejecuciones, como más de 10, debe haber una forma de mostrar solo 10 tareas de forma visible con un eje y que se pueda desplazar para mostrar otras tareas. enlace de plunker al problema
Explicación del problema del plunker anterior.
Si comprueba la captura de pantalla a continuación desde arriba, el rango de tiempo es de 12/12/2014 09:32:26
hasta 12/12/2014 10:32:26
y solo hay 2 tareas que se han ejecutado m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB
& m_ZIG2_HCP_MERGE_IB_CN
. Sin embargo, puedo ver otra tarea intermedia LILLY_C
que ni siquiera se ejecutó en este rango de fecha y hora. (En datos reales, hay más de 10 tareas que abarrotan este gráfico y que ni siquiera se incluyen en este rango de fecha y hora)
Además, si nota que en la esquina inferior derecha, el tiempo cambió de 09:38
a 19:20
. 19:20
es la hora de finalización de la m_ZIG2_HCP_MERGE_IB_CN
tarea.
A continuación se muestran mis opciones de gráfico
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
};
fuente
Highcharts error #15
es por error al ordenar sus datos. Estás asignando tus datos pero no en orden ascendente. Por favor verifique, tal vez vuelva a verificar porque veo muchos de estos problemas porque el desarrollador no encuentra el problema en sus datos ordenados de alguna manera.Respuestas:
Entonces, después de unas horas de investigación, acabo de descubrir al culpable (o eso espero). El problema es su definición de
yAxis
formateador de etiquetas:En realidad, no comprueba si debe mostrar la etiqueta de acuerdo con
task.intervals
(verjson.js
). Una simple actualización ( Plunker ) del formateador parece funcionar:Consulte Plunker para ver una demostración .
El significado de las etiquetas yAxis es: Mostrar etiqueta si ve una corrida en el gráfico o si hay una corrida a la derecha del gráfico. Modifica la condición
como veas conveniente.
Descargo de responsabilidad: no uso Highcharts, por lo que esta respuesta intenta explicar el problema y no sugerir una forma de Highcharts de resolver el problema.
Lecciones aprendidas:
yaxis-plugin.js
es irrelevante para el problema.console.log()
para averiguar qué está pasando.fuente