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

Question

在我同步 dygraphs 中的图表后，当我缩放/取消缩放/重置时，图例不会留在原处。

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

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

不要

您应该不使用jQuery 更改Dygraph 元素样式。由于 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