Ich habe eine Verpflichtung zur Handlung Lauf der Geschichte einer Aufgabe in Highcharts. Es muss den Laufverlauf der Aufgaben als horizontale Leiste anzeigen. Es gibt zusätzliche Anforderungen, die ich unten als Update hinzugefügt habe. Kürzlich habe ich herausgefunden, dass diese inverted
Option in StockChart nicht unterstützt wird und dass nur Navigator & RangeSelector in StockChart verfügbar sind. Deshalb benutze ich diese Funktionen.
Um die Anforderung zu erfüllen, habe ich etwas Ähnliches wie dieses jsfiddle-Beispiel erstellt (irgendwo beim Surfen gefunden, erinnere mich nicht an die Quelle) und dank Pawel Fus mit Hilfe meiner vorherigen Frage diesen Plunker-Link erhalten
Aktualisieren der Frage, um Verwirrung zu vermeiden
Zusätzliche Anforderungen:
Zeigen Sie nur die Aufgaben , die liefen in einem bestimmten Datum und Zeitbereich . Wenn zu viele Läufe vorhanden sind, z. B. mehr als 10 Läufe, muss es eine Möglichkeit geben, nur 10 Aufgaben mit einer y-Achse sichtbar anzuzeigen, die scrollbar ist, um andere Aufgaben anzuzeigen. Plunker Link zum Problem
Problem Erklärung des obigen Plunkers.
Wenn Sie den Screenshot unten vom obigen Plunker aus überprüfen, reicht der Zeitbereich von 12/12/2014 09:32:26
bis 12/12/2014 10:32:26
und es gibt nur 2 Aufgaben, die m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB
& ausgeführt haben m_ZIG2_HCP_MERGE_IB_CN
. Ich sehe jedoch eine andere Aufgabe dazwischen, LILLY_C
die nicht einmal in diesem Datums- / Zeitbereich ausgeführt wurde. (In tatsächlichen Daten gibt es mehr als 10 Aufgaben, die dieses Diagramm überladen, das nicht einmal unter diesen Datums- / Zeitbereich fällt.)
Auch wenn Sie unten rechts bemerken, hat sich die Zeit von 09:38
nach verschoben 19:20
. 19:20
ist die Endzeit für die m_ZIG2_HCP_MERGE_IB_CN
Aufgabe.
Unten sind meine Diagrammoptionen
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
};
quelle
Highcharts error #15
liegt ein Fehler beim Sortieren Ihrer Daten vor. Sie weisen Ihre Daten zu, jedoch nicht in aufsteigender Reihenfolge. Bitte überprüfen Sie, vielleicht überprüfen Sie es noch einmal, da ich viele dieser Probleme sehe, weil der Entwickler das Problem in seinen irgendwie sortierten Daten nicht findet.Antworten:
Nach ein paar Stunden Graben habe ich gerade den Täter herausgefunden (oder ich hoffe es wirklich). Das Problem ist Ihre Definition des
yAxis
Etikettenformatierers:Sie prüfen eigentlich nicht, ob Sie das Etikett gemäß
task.intervals
(siehejson.js
) anzeigen sollen . Ein einfaches Update ( Plunker ) des Formatierers scheint zu funktionieren:Siehe Plunker für eine Demo .
Die Bedeutung der yAxis-Beschriftungen lautet: Beschriftung anzeigen, wenn Sie einen Lauf im Diagramm sehen oder wenn sich rechts im Diagramm ein Lauf befindet. Bitte ändern Sie die Bedingung
wie du es für richtig hältst.
Haftungsausschluss: Ich verwende keine Highcharts, daher versucht diese Antwort, das Problem zu erklären und keine Highcharts zur Lösung des Problems vorzuschlagen.
Gewonnene Erkenntnisse:
yaxis-plugin.js
ist für das Problem irrelevant.console.log()
, um herauszufinden, was los ist.quelle