Saya memiliki kebutuhan plot sejarah lari dari tugas di Highcharts. Itu perlu menunjukkan bahwa menjalankan riwayat tugas sebagai bilah horizontal. Ada persyaratan tambahan yang saya tambahkan sebagai pembaruan di bawah ini. Baru-baru ini saya mengetahui bahwa inverted
opsi tidak didukung di StockChart dan bahwa hanya navigator & rangeSelector yang tersedia di StockChart. Oleh karena itu saya menggunakan fungsi tersebut.
Jadi untuk mencapai persyaratan, saya membuat sesuatu yang mirip dengan contoh jsfiddle ini (ditemukan di suatu tempat saat menjelajah tidak ingat sumbernya) dan berakhir dengan tautan plunker ini dengan bantuan dari pertanyaan saya sebelumnya , terima kasih kepada Pawel Fus
Memperbarui pertanyaan untuk menghindari kebingungan
Persyaratan tambahan:
Tampilkan hanya tugas-tugas yang berjalan dalam rentang tanggal dan waktu tertentu . Jika ada terlalu banyak proses, seperti lebih dari 10 proses, maka perlu ada cara untuk menampilkan hanya 10 tugas yang terlihat dengan sumbu y yang dapat di-scroll untuk menampilkan tugas lain. tautan plunker ke masalah
Penjelasan masalah plunker diatas.
Jika Anda memeriksa tangkapan layar di bawah ini dari plunker di atas, rentang waktunya adalah dari 12/12/2014 09:32:26
hingga 12/12/2014 10:32:26
dan hanya ada 2 tugas yang telah berjalan m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB
& m_ZIG2_HCP_MERGE_IB_CN
. Namun saya dapat melihat tugas lain di antaranya LILLY_C
yang bahkan tidak berjalan dalam rentang waktu ini. (Dalam data aktual, ada lebih dari 10 tugas yang mengacaukan bagan ini yang bahkan tidak termasuk dalam rentang waktu tanggal ini)
Juga jika Anda perhatikan di pojok kanan bawah waktu bergeser dari 09:38
ke 19:20
. 19:20
adalah waktu akhir untuk m_ZIG2_HCP_MERGE_IB_CN
tugas.
Di bawah ini adalah opsi bagan saya
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
};
sumber
Highcharts error #15
adalah kesalahan dalam mengurutkan data Anda. Anda menetapkan data Anda tetapi tidak dalam urutan menaik. Silakan periksa, mungkin periksa kembali karena saya melihat banyak masalah ini karena pengembang gagal menemukan masalah dalam data yang entah bagaimana diurutkan.Jawaban:
Jadi setelah beberapa jam menggali, saya baru saja mengetahui pelakunya (atau saya sangat berharap demikian). Masalahnya adalah definisi Anda tentang
yAxis
pemformat label: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' } },
Anda tidak benar-benar memeriksa apakah Anda harus menampilkan label sesuai dengan
task.intervals
(lihatjson.js
). Pembaruan sederhana ( Plunker ) dari pemformat tampaknya berfungsi: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' } },
Lihat Plunker untuk demo .
Arti dari label yAxis adalah: Tampilkan label jika Anda melihat run di grafik atau jika ada run di sebelah kanan grafik. Harap ubah ketentuannya
if (_xAxis.min <= _int.to) {
sesuai keinginan Anda.
Penafian: Saya tidak menggunakan Highchart, jadi jawaban ini mencoba menjelaskan masalah dan tidak menyarankan cara Highchart untuk memecahkan masalah.
Pelajaran yang dipelajari:
yaxis-plugin.js
tidak relevan dengan masalah.console.log()
untuk mencari tahu apa yang sedang terjadi.sumber