Dygraph 2.2.1 给图线添加注释

Question

我有包含多行时间序列数据的 dygraph 图表，如下所示，我想在标记数据的不同图表行的顶部显示一组注释。

function createGraph(div_element,graph_data) {
const dygraph_div = document.getElementById(div_element);

    gs.push(
      (g = new Dygraph(dygraph_div, await fetchData(graph_data), {
        animatedZooms: true,
        annotations: true,
        zoomCallback: function (minDate, maxDate) {
          let start_date= new Date(minDate).toLocaleString("sv");
          let end_date= new Date(maxDate).toLocaleString("sv");
          console.log("Zoomed to [", start_date, ", ", end_date, "]");
          zoom(begin_date, end_date);
        },
        legend: "always",
      }))
    );

};

下面的函数用于转换包含标记数据的开始和结束时间戳信息的数组，最多可以有 100 个元素。

  async function convertToAnnotations(flagged_data) {
    flagged_data.forEach((flag) => {
      const { start_timestamp, stop_timestamp, chart_lines} = flag;
  
      chart_lines.forEach((line) => {
        const graph = gs.find((g) => g && g.attributes_ && g.attributes_.series_ && g.attributes_.series_[line]);
  
        if (graph) {
          const annotations = graph.annotations() || [];
  
          annotations.push({
            series: line,
            x: new Date(start_timestamp).toLocaleString("sv"),
            height: 5,
            width: 5,
            tickHeight: 1,
            shortText: "test",
            text: "Flagged data",
          });
  
          graph.setAnnotations(annotations);
        }
      });
  
    });
    console.log(gs);
  }

这是末尾注释数组中一个对象的示例结果：

height: 5
series: "A"
shortText: "test"
text: "Flagged data"
tickHeight: 1
width: 5
x: "2022-09-26 13:40:00"

我的问题是，注释已在函数中设置，我在 console.log(gs) 时可以看到它，但任何图表上都没有显示任何内容，系列确实匹配。

我尝试使用 .getTime() 而不是 toLocaleString() 但我遇到了错误。

我尝试手动创建 html 元素，但它最终无法正常工作或在垂直方向或随机位置显示小圆圈，而不是在正确的图表线上。

我到处搜索，但我无法解决这个问题，所以我来了。