我有情节的要求运行历史一个的任务在Highcharts。它需要以水平条显示任务的运行历史记录。我在下面的更新中添加了其他要求。最近我发现,inverted
在不支持的选项StockChart,只有导航和rangeSelector在StockChart可用。因此,我正在使用这些功能。
因此,为了达到要求,我创建了类似于此jsfiddle示例的内容(在浏览时发现某个地方,不记得源代码了),并在我之前的问题的帮助下,通过Pawel Fus的帮助,得到了这个punker链接
更新问题以避免混淆
其他要求:
显示只有那些任务,其运行在一个特定的日期和时间范围。如果运行太多,例如运行超过10次,则需要有一种方法可以显示只有10个任务,并且y轴可滚动显示其他任务。 问题的链接
上面的问题的问题解释。
如果您从plunker上方查看下面的屏幕截图,则时间范围是从12/12/2014 09:32:26
到12/12/2014 10:32:26
,并且只有2个任务在运行m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB
&m_ZIG2_HCP_MERGE_IB_CN
。但是我可以看到LILLY_C
在此日期时间范围内甚至没有运行过的另一个任务。(在实际数据中,有超过10个任务使该图表混乱,甚至不属于该日期时间范围)
另外,如果您发现最右下角的时间从09:38
更改为19:20
。19:20
是m_ZIG2_HCP_MERGE_IB_CN
任务的结束时间。
以下是我的图表选项
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
};