有没有一种方法可以在Apex折线图上动态创建X轴注释

Question

有没有一种方法可以在Apex折线图上动态创建X轴注释？演示中的示例(见上面的链接(显示了静态的硬编码注释。

起初，我认为我可以遍历数据并为每个项调用updateOptions方法，但这不起作用，因为每次调用该方法时，我都会覆盖在循环的上一次迭代中添加的任何注释。

根据这次讨论，我似乎应该能够使用addXaxisAnnotation方法，但我没有看到注释出现在上

这是一个重现问题的代码笔。有一个模拟数据数组来填充图表；标记"；即注释。我正在创建空图表，然后用注释和数据更新它。

下面是我如何尝试使用addXaxisAnnotation方法的一个示例。

// A bunch of code to create the line chart goes here
// List of "markers" i.e. annotations
let markerList = [
{
name: "Pre Season 1",
period_begin: "2020-11-01"
},
{
name: "Episodes 1-3",
period_begin: "2020-11-26"
},
{
name: "Episodes 4-5",
period_begin: "2020-12-03"
},
{
name: "Episodes 6-7",
period_begin: "2020-12-10"
},
{
name: "Episode 8",
period_begin: "2020-12-17"
},
{
name: "Post Season 1",
period_begin: "2020-12-24"
}
];
markerList.forEach((item) => {
chart.addXaxisAnnotation({
x: new Date(`${item.period_begin}`).getTime(),
text: `${item.name}`
}
});
});

Answer 1

我需要把这段代码放在；"更新"；函数并使用"；exec"；方法来调用"；addXaxisAnnotation"；功能类似：

markerList.forEach((item) => {
ApexCharts.exec("posts-over-time-chart", "addXaxisAnnotation", {
x: new Date(`${item.period_begin}`).getTime(),
label: {
text: `${item.name}`,
},
});
});