У меня есть требование построить историю выполнения задачи в Highcharts. Он должен отображать историю выполнения задач в виде горизонтальной полосы. Есть дополнительные требования, которые я добавил в качестве обновления ниже. Недавно я узнал, что эта inverted
опция не поддерживается в StockChart и что только навигатор и rangeSelector в StockChart доступны . Поэтому я использую эти функции.
Поэтому для того , чтобы достичь требования я создал нечто похожее на эту jsfiddle примера (найденные где - то во время просмотра не помнит источник) и в конечном итоге с этой plunker ссылкой с помощью моего предыдущего вопроса , благодаря Pawel Fus
Обновляем вопрос, чтобы избежать путаницы
Дополнительные требования:
Показывать только те задачи, которые выполнялись в определенном диапазоне дат и времени . В случае, если выполняется слишком много запусков, например, более 10 запусков, тогда должен быть способ визуально отображать только 10 задач с помощью оси Y, которую можно прокручивать для отображения других задач. плункер ссылка на проблему
Объяснение проблемы вышеупомянутого плункера.
Если вы посмотрите на снимок экрана ниже сверху плункера, временной диапазон от 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
};
источник
Highcharts error #15
это ошибка при сортировке ваших данных. Вы назначаете свои данные, но не в порядке возрастания. Пожалуйста, проверьте, возможно, дважды проверьте, потому что я вижу много этих проблем, потому что разработчик не может найти проблему в своих каким-то образом отсортированных данных.Ответы:
Итак, после нескольких часов копания я только что обнаружил виновника (или я очень на это надеюсь). Проблема заключается в вашем определении средства
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
не имеет отношения к проблеме.console.log()
чтобы узнать, что происходит.источник