Ho l'obbligo di tracciare la cronologia di esecuzione di un'attività in Highcharts. Deve mostrare la cronologia delle attività come una barra orizzontale. Ci sono requisiti aggiuntivi che ho aggiunto di seguito come aggiornamento. Recentemente ho scoperto che l' invertedopzione non è supportata in StockChart e che solo il navigatore e il rangeSelector sono disponibili in StockChart. Pertanto sto usando queste funzioni.
Quindi, per soddisfare il requisito ho creato qualcosa di simile a questo esempio jsfiddle (trovato da qualche parte durante la navigazione non ricordo la fonte) e sono finito con questo collegamento plunker con l'aiuto della mia domanda precedente , grazie a Pawel Fus
Aggiornamento della domanda per evitare confusione
Requisiti addizionali:
Mostra solo quei compiti che correvano in un particolare di data e ora . Nel caso in cui ci siano troppe esecuzioni, ad esempio più di 10 esecuzioni, deve esserci un modo per visualizzare solo 10 attività in modo visibile con un asse y che sia scorrevole per mostrare altre attività. collegamento plunker al problema
Spiegazione del problema del plunker sopra.
Se controlli lo screenshot qui sotto dal plunker sopra, l'intervallo di tempo è da 12/12/2014 09:32:26a 12/12/2014 10:32:26e ci sono solo 2 attività che sono state eseguite m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& m_ZIG2_HCP_MERGE_IB_CN. Tuttavia, posso vedere un'altra attività in mezzo LILLY_Cche non è stata nemmeno eseguita in questo intervallo di date. (Nei dati effettivi ci sono più di 10 attività che ingombra questo grafico che non rientra nemmeno in questo intervallo di date)
Inoltre, se noti nell'angolo in basso a destra il tempo è passato da 09:38a 19:20. 19:20è l'ora di fine m_ZIG2_HCP_MERGE_IB_CNdell'attività.
Di seguito sono riportate le mie opzioni del grafico
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
};