Amcharts：基于日期和时间的时间表轴

Question

我想在基于 Amcharts 的甘特图中显示一个时间表。它将包含整周，以及这一周每一天的不同时间段。

这意味着，当我看到整周时，X 轴上会显示日期： 4 月 1 日，4 月 2 日，... 4 月 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;

但是只显示小时，用户很难看懂图表。

Answer 1

您不能直接绘制多个轴值（除非 amcharts 找到一个用例并添加一个包装器）但您可以侦听点击或缩放事件并使用轴的新值更新图表。当他们缩小时将其重置。无论如何，您正在重新渲染图表，因为每次缩放时都必须重新计算绘图比例。

如果这是一种可接受的方法，我将用代码更新答案。您也可以同时按照上述逻辑自行尝试。

Answer 2

我在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/

谢谢，希望它能帮到别人一次。

Amcharts：基于日期和时间的时间表轴

Amcharts: date and time based axis for schedule

javascript

gantt-chart

amcharts