Tôi có một yêu cầu để vẽ lịch sử chạy của một nhiệm vụ trong Highcharts. Nó cần hiển thị lịch sử chạy của các tác vụ dưới dạng thanh ngang. Có các yêu cầu bổ sung mà tôi đã thêm dưới dạng bản cập nhật bên dưới. Gần đây, tôi phát hiện ra rằng invertedtùy chọn không được hỗ trợ trong StockChart và chỉ có bộ điều hướng & dải ô mới có sẵn trong StockChart. Do đó tôi đang sử dụng các chức năng đó.
Vì vậy, để đạt được yêu cầu, tôi đã tạo một cái gì đó tương tự như ví dụ jsfiddle này (tìm thấy ở đâu đó trong khi duyệt không nhớ nguồn) và kết thúc bằng liên kết plunker này với sự trợ giúp từ câu hỏi trước của tôi , cảm ơn Pawel Fus
Cập nhật câu hỏi để tránh nhầm lẫn
Các yêu cầu bổ sung:
Chỉ hiển thị những tác vụ đã chạy trong một phạm vi ngày và giờ cụ thể . Trong trường hợp có quá nhiều lần chạy, chẳng hạn như hơn 10 lần chạy, thì cần phải có cách để chỉ hiển thị 10 tác vụ một cách rõ ràng với trục y có thể cuộn để hiển thị các tác vụ khác. liên kết plunker đến vấn đề
Giải thích vấn đề của plunker trên.
Nếu bạn kiểm tra ảnh chụp màn hình bên dưới từ plunker trên, phạm vi thời gian là từ 12/12/2014 09:32:26đến 12/12/2014 10:32:26và chỉ có 2 tác vụ đã chạy m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& m_ZIG2_HCP_MERGE_IB_CN. Tuy nhiên, tôi có thể thấy một nhiệm vụ khác LILLY_Cthậm chí không chạy trong phạm vi ngày này. (Trong dữ liệu thực tế, có hơn 10 nhiệm vụ làm lộn xộn biểu đồ này, thậm chí không thuộc phạm vi ngày này)
Ngoài ra, nếu bạn nhận thấy ở góc dưới cùng bên phải thời gian chuyển từ 09:38sang 19:20. 19:20là thời gian kết thúc cho m_ZIG2_HCP_MERGE_IB_CNnhiệm vụ.
Dưới đây là các tùy chọn biểu đồ của tôi
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
};