在 dygraphs 中调整链接图的大小时，图例不会留在原地

Question

在我同步 dygraphs 中的图形后，当我 zoom/unzoom/reset 时，图例不会留在原处。

我已经这样初始化了图表：

g = new Dygraph(
    document.getElementById("demodiv"),
    data.slice(50),
    options
);

g2 = new Dygraph(
    document.getElementById("demodiv2"),
    data,
    options
);

图例样式通过jQuery修改：

$("#container .dygraph-legend").css("left", "50px");
$("#container .dygraph-legend").css("width", "150px");

最后，我这样同步：

Dygraph.synchronize([g, g2], {
  selection: true,
  zoom: true,
  range: false
});

然后，在两个图表上尝试缩放、取消缩放和重置，图例四处移动。

我创建了这个 jsFiddle 来显示问题（图表代码在第 618 行）。

相同的代码段：

如何使它们在缩放等情况下保持初始位置？

Answer 1

不要

您应该不将 Dygraph 元素样式更改为 jQuery。由于 Dygraph 将不断更改样式，因此您的 jQuery 样式将不再有效。

选项

Dygraph 提供了一个选项来指定另一个 DOM 元素作为图例。这意味着，您可以将图例内容放入另一个 div 或您想要的任何其他 DOM 元素。

该选项称为 labelsDiv。阅读更多 here

解决方案

因为我们现在可以使用另一个 DOM 元素作为我们的图例/标签内容。让我们稍微改变一下 DOM 结构：

<div id="container">
  <div id="demodiv"></div>
  <div id="legend"></div>
</div>

<div id="container2">
    <div id="demodiv2"></div>
    <div id="legend2"></div>
</div>

请注意，我们现在有两个不同的容器用于两个不同的 Dygraph 图表。我们用容器包装它们以在容器上应用样式 position: relative; 并将 position: absolute; 放在 #legend 和 #legend2 上。现在让我们看看CSS。

#container, #container2 {
  position: relative;
}

#legend, #legend2 {
  position: absolute;
  top: 0; /* set accordingly */
  left: 0; /* set accordingly */
  display: inline-block;
  width: 150px; /* set accordingly */
  background-color: #fff; /* set accordingly */
}

现在您的脚本，我们将提供 labelsDiv 选项并指定我们的目标 div 元素：

var data = [ ... ] // your data here;

g = new Dygraph( document.getElementById("demodiv"), data.slice(50), {
    customBars: true,
    labels: ["date", "a", "b", "c"],
    labelsDiv: document.getElementById('legend'),
});

g2 = new Dygraph( document.getElementById("demodiv2"), data, {
    customBars: true,
    labels: ["date", "a", "b", "c"],   
    labelsDiv: document.getElementById('legend2'),
});

Dygraph.synchronize([g, g2], {
    selection: true,
    zoom: true,
    range: false
});

片段

我尝试了很多来在这里创建一个片段，以便单击一下就可以在这里看到结果，但是有错误。所以这里是 fiddle link

在 dygraphs 中调整链接图的大小时，图例不会留在原地

legends do not stay in place when resizing linked graphs in dygraphs

css

position

legend

dygraphs

不要

选项

解决方案

片段