Mam wymaganie działki historii run z zadania w Highcharts. Musi pokazać, że uruchomiono historię zadań jako poziomy pasek. Poniżej znajdują się dodatkowe wymagania, które dodałem jako aktualizację. Niedawno dowiedziałem się, że inverted
opcja nie jest obsługiwana w StockChart i że tylko navigator i rangeSelector są dostępne w StockChart. Dlatego używam tych funkcji.
Aby spełnić to wymaganie, stworzyłem coś podobnego do tego przykładu jsfiddle (znalezionego gdzieś podczas przeglądania nie pamiętam źródła) i skończyłem z tym linkiem do plunkera z pomocą mojego poprzedniego pytania , dzięki Pawłowi Fusowi
Aktualizuję pytanie, aby uniknąć nieporozumień
Dodatkowe wymagania:
Pokaż tylko te zadania, które zostały uruchomione w określonym zakresie dat i godzin . W przypadku zbyt wielu uruchomień, takich jak więcej niż 10 uruchomień, musi istnieć sposób, aby wyświetlić tylko 10 zadań w widoczny sposób z osią Y, którą można przewijać, aby pokazać inne zadania. link plunkera do problemu
Wyjaśnienie problemu powyższego plunkera.
Jeśli sprawdzisz poniższy zrzut ekranu z powyższego plunkera, zakres czasu wynosi od 12/12/2014 09:32:26
do 12/12/2014 10:32:26
i są tylko 2 zadania, które uruchomiły m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB
& m_ZIG2_HCP_MERGE_IB_CN
. Jednak widzę inne zadanie, pomiędzy LILLY_C
którymi nawet nie zostało uruchomione w tym zakresie dat. (W rzeczywistych danych istnieje ponad 10 zadań, które zaśmiecają ten wykres, który nawet nie mieści się w tym zakresie dat)
Również jeśli zauważysz w prawym dolnym rogu czas przesunięty z 09:38
na 19:20
. 19:20
to czas zakończenia m_ZIG2_HCP_MERGE_IB_CN
zadania.
Poniżej znajdują się moje opcje wykresów
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
};
źródło
Highcharts error #15
jest to błąd w sortowaniu danych. Przypisujesz swoje dane, ale nie w kolejności rosnącej. Proszę sprawdzić, może sprawdź dwukrotnie, ponieważ widzę wiele tych problemów, ponieważ programista nie znajduje problemu w swoich jakoś posortowanych danych.Odpowiedzi:
Więc po kilku godzinach kopania właśnie znalazłem winowajcę (lub naprawdę mam taką nadzieję). Problem w twojej definicji programu
yAxis
formatującego etykiety: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' } },
W rzeczywistości nie sprawdzasz, czy powinieneś wyświetlać etykietę zgodnie z
task.intervals
(zobaczjson.js
). Wydaje się, że prosta aktualizacja ( Plunker ) programu formatującego działa: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' } },
Zobacz demo Plunkera .
Znaczenie etykiet yAxis jest następujące: Pokaż etykietę, jeśli widzisz przebieg na wykresie lub jeśli po prawej stronie wykresu jest przebieg. Zmień warunek
if (_xAxis.min <= _int.to) {
jak uważasz za stosowne.
Zastrzeżenie: nie używam Highcharts, więc ta odpowiedź próbuje wyjaśnić problem, a nie sugerować Highcharts-sposób rozwiązania problemu.
Zdobyta wiedza:
yaxis-plugin.js
nie ma znaczenia dla problemu.console.log()
aby dowiedzieć się, co się dzieje.źródło