Amcharts: ось даты и времени для расписания

Я хочу отобразить график в виде диаграммы Ганта на основе Amcharts. Он будет содержать целую неделю и разные периоды часов в каждый день на этой неделе.

Это означает, что когда я вижу всю неделю, по оси X будут отображаться дни: 1 апреля, 2 апреля, ... 7 апреля.

А когда я увеличу масштаб для особого дня, будут отображаться часы: 08:00, 08:30 ... 13:30, 14:00.

В поисках решения нашел примеры только с днями или только с часами. Но никогда не смешивай оси так, как мне нужно. Возможно ли это с Amcharts?

На данный момент мой код выглядит так:

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";
dateAxis.renderer.minGridDistance = 50;
dateAxis.baseInterval = { count: 10, timeUnit: "minute" };
dateAxis.max = new Date(2018, 0, 5, 24, 0, 0, 0).getTime();
dateAxis.strictMinMax = true;
dateAxis.renderer.tooltipLocation = 0;

Но он показывает только часы, и пользователям сложно понять график.


javascript gantt-chart amcharts
person TheVic    schedule 08.02.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы не можете напрямую построить несколько значений осей (если amcharts не найдет вариант использования и не добавит оболочку), но вы можете прослушать событие щелчка или масштабирования и обновить диаграмму новыми значениями для осей. Сбросьте его обратно, когда они уменьшат масштаб. Вы все равно повторно визуализируете диаграмму при увеличении, поскольку масштабы графика необходимо пересчитывать каждый раз при ее увеличении.

Я дополню ответ кодом, если это приемлемый подход. А пока вы можете попробовать самостоятельно с указанной логикой.

person Dhananjai Pai    schedule 08.02.2019
comment
Да, это приемлемо. Пожалуйста, обновите код, потому что я действительно не понимаю, как это реализовать. Спасибо. - person TheVic; 09.02.2019

arrow_upward
0
arrow_downward

Я нашел следующие решения в Amcharts V3.

Первый - указать дату как ось X, а время как ось Y: https://www.amcharts.com/docs/v3/tutorials/using-gantt-chart-display-multi-segmented-columnsbars/

Второй работает именно так, как я хотел и объяснял в вопросе ниже: https://www.amcharts.com/docs/v3/tutorials/gantt-chart-legend/

Спасибо, надеюсь, однажды это поможет кому-то другому.

person TheVic    schedule 12.02.2019