Я пытаюсь создать расписание Ганта. Я основал этот пример на примере управления ресурсами. Пока много хороших вещей! У меня есть несколько проблем, для которых я буду делать отдельные посты.
Последняя проблема, с которой я сталкиваюсь (пока), заключается в том, что мне нужно показывать часы дня как часть моего х- ось. Когда я получаю данные на диаграмме более чем за 2 дня, некоторые или все эти метки оси X начинают исчезать, оставляя вместо этого пустые значения. Я бы хотел изменить ориентацию текста по вертикали и, возможно, уменьшить размер шрифта.
В приведенной ниже скрипте есть данные за 4 дня. Независимо от того, насколько маленьким я сделаю шрифт, значение часа будет пустым. Если я go просматриваю данные и удаляю все записи, которые содержат 02-06 и 02-07, это заставляет Гантт показывать только данные за 2 дня, а метки часа выглядят очень маленькими.
Вращение метки, кажется, не имеет никакого эффекта. В конечном счете мне нужно показать время суток на этой оси ... Это мой предпочтительный способ, показывающий каждый час. Но другие решения приветствуются. Может быть, отображается только через час или даже каждые 4 часа.
Вот скрипка с отсутствующими метками: https://jsfiddle.net/eddiem9/n2v740tj/7/, а вот скрипка с меньшим количеством данных, поэтому метки отображаются https://jsfiddle.net/eddiem9/h9qw5rsj/22/
chart = Highcharts.ganttChart('container', {
series: series,
plotOptions: {
series: {
color: '#FF0000'
}
},
scrollbar: {
enabled: true
},
title: {
text: 'Irrigation Schedule',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '24px'
}
},
//rangeSelector: {
// enabled: true,
// selected: 0
//},
tooltip: {
pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
},
xAxis:
[{
labels: {
format: '{value:%H}', // hour of the day
rotation: -90,
align: 'center',
reserveSpace: true,
style: {
fontSize: '8pt',
}
},
tickInterval: 1000 * 60 * 60, // HOUR
}, {
labels: {
format: '{value:%B %e}' // day name of the week
},
tickInterval: 1000 * 60 * 60 * 24, // Day
}
],
yAxis: {
type: 'category',
max: series.length-1,
grid: {
columns: [{
title: {
text: 'Pump'
},
categories: map(series, function (s) {
return s.PumpName;
})
}, {
title: {
text: 'Zone'
},
categories: map(series, function (s) {
return s.IrrigationZoneName;
})
},{
title: {
text: 'Status'
},
categories: map(series, function (s) {
return s.CurrentStatus;
})
}
]
}
}
}
)
Заранее спасибо!
Edd ie