如何在AmCharts 5甘特图中添加代表当前日期的竖线？

在AmCharts 5中，我们可以通过AxisRange来实现当前日期竖线的绘制，具体步骤和代码如下：

实现步骤 #

• 获取当前日期的Date对象，可根据需求重置时间部分为0:00:00
• 在甘特图的时间轴（X轴）上创建一个AxisRange
• 配置AxisRange的视觉样式，包括竖线的颜色、宽度，以及可选的标签文本

代码示例 #

// 假设已初始化甘特图实例（chart变量）
// 获取当前日期，重置时间部分为0:00:00
const today = new Date();
today.setHours(0, 0, 0, 0);

// 获取甘特图的时间轴（X轴）
const xAxis = chart.xAxes.getIndex(0);

// 创建AxisRange
const range = xAxis.createAxisRange(xAxis.makeDataItem({
  value: am5.time.dateToTimestamp(today),
  endValue: am5.time.dateToTimestamp(today)
}));

// 配置竖线样式
range.get("grid").setAll({
  stroke: am5.color("#ff0000"), // 竖线颜色
  strokeWidth: 2, // 竖线宽度
  strokeDasharray: [5, 3] // 可选，设置虚线样式
});

// 可选：添加当前日期标签
range.get("label").setAll({
  text: "当前日期",
  fill: am5.color("#ff0000"),
  location: 0.5,
  fontSize: 12
});

关键说明 #

• am5.time.dateToTimestamp用于将Date对象转换为AmCharts 5兼容的时间戳格式
• 将value和endValue设为同一时间，即可生成竖线
• 通过修改grid的属性可自定义竖线外观，比如颜色、宽度、虚实效果
• 标签部分可按需添加，调整location能改变标签在竖线上的位置

内容的提问来源于stack exchange，提问作者Lucas Saraiva