Как создать диаграмму диапазона столбцов в Highcharts с использованием функций диапазона и навигатора?
У меня есть требование для построения истории выполнения задачи в Highcharts. Он должен показать, что запустить историю задач как горизонтальную полосу. Есть дополнительные требования, которые я добавил в качестве обновления ниже. Недавно я узнал, что опция inverted не поддерживается в StockChart и что только navigator и rangeSelector доступны в StockChart. Поэтому я использую эти функции.
Итак, для достижения этого требования я создал нечто похожее на этот пример jsfiddle (найденный где-то во время просмотра не помнит источник) и закончил с эту ссылку plunker с помощью моего предыдущего question, благодаря Pawel Fus
Обновление вопроса, чтобы избежать путаницы
Дополнительные требования:
Показать только те задачи, которые выполнялись в определенной дате и времени. В случае, если слишком много прогонов, например, более 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.
![enter image description here]()
Ниже приведены параметры моей диаграммы
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
};
Ответы
Ответ 1
Итак, после нескольких часов копания, я только что узнал преступника (или я действительно так надеюсь). Проблема заключается в вашем определении формата 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(), чтобы узнать, что происходит.
Ниже приведены параметры моей диаграммы