有没有办法在 Apex 折线图上动态创建 X 轴注释？

Question

有没有办法在Apex 折线图上动态创建 X 轴注释？ 演示中的示例（见上面的链接）显示了 static，硬编码注释。

起初我以为我可以遍历数据并为每个项目调用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

我需要将此代码放入“更新”function 并使用“exec”方法调用“addXaxisAnnotation”function，如下所示：

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