Highcharts 에서 작업 의 실행 기록 을 플로팅해야합니다 . 작업의 실행 내역을 가로 막대로 표시해야합니다. 아래에 업데이트로 추가 한 추가 요구 사항이 있습니다. 최근 에 StockChart 에서는 옵션이 지원되지 않으며 StockChart 에서는 탐색기 및 rangeSelector 만 사용할 수 있다는 사실을 알게 되었습니다. 따라서 나는 그 기능을 사용하고 있습니다.inverted
그래서 요구 사항을 달성하기 위해 나는 이 jsfiddle 예제 와 비슷한 것을 만들고 (탐색하는 동안 어딘가에서 소스를 기억하지 못함) Pawel Fus 덕분에 이전 질문의 도움 으로이 플 런커 링크 로 끝났습니다.
혼동을 피하기 위해 질문 업데이트
추가 요구 사항:
보기 만 작업 실행 특정의 날짜 및 시간 범위를 . 10 개 이상의 실행과 같이 너무 많은 실행이있는 경우 다른 작업을 표시하기 위해 스크롤 할 수있는 y 축을 사용하여 10 개의 작업 만 시각적으로 표시하는 방법이 있어야합니다.
문제에 대한 플러 커 링크
위의 플 런커의 문제 설명.
위의 plunker에서 아래 스크린 샷을 확인하면 시간 범위는 12/12/2014 09:32:26
~ 12/12/2014 10:32:26
이고 실행 된 작업은 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
};
답변
그래서 몇 시간 동안 파고 들자 방금 범인을 찾았습니다 (또는 정말 그러기를 바랍니다). 문제는 yAxis
레이블 포맷터 의 정의입니다 .
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'
}
},
에 따라 레이블을 표시해야하는지 실제로 확인하지 않습니다 task.intervals
(참조 json.js
). 포맷터 의 간단한 업데이트 ( Plunker )가 작동하는 것 같습니다.
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'
}
},
데모는 Plunker를 참조하십시오 .
yAxis 레이블의 의미는 다음과 같습니다. 그래프에서 런이 표시되거나 그래프 오른쪽에 런이있는 경우 레이블을 표시합니다. 조건을 수정하십시오
if (_xAxis.min <= _int.to) {
당신이 적합하다고 생각합니다.
면책 조항 : 저는 Highcharts를 사용하지 않으므로이 답변은 문제를 설명하는 것이지 Highcharts 문제 해결 방법을 제안하지 않습니다.
교훈:
yaxis-plugin.js
문제와 관련이 없습니다.- Highstock.js는 오픈 소스 라이브러리 ( highstock.src.js )입니다. 원본 소스 코드를 디버깅하면 디버깅이 훨씬 쉽습니다. 축소 된 코드는 불필요한 복잡성과 추측을 추가합니다. 나는 도서관을 다운로드하고
console.log()
무슨 일이 일어나고 있는지 알아보기 위해 일부 를 추가 했습니다.