javascript - 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 找到用例并添加包装器)，但您可以监听点击或缩放事件并使用轴的新值更新图表。当他们缩小时将其重置。无论如何，您都会在缩放时重新渲染图表，因为每次缩放时都必须重新计算绘图比例。

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