多个 dygraph 图例

Question

我想显示 dygraph 图例选项 "always" 和 "follow" 的组合。使用 "follow" 的缺点是，如果没有鼠标悬停在图形上，则没有图例。如果没有鼠标悬停，我想在单独的 div 中显示默认图例，类似于带有 labelsDiv 集的图例 "always"。这将允许用户截取图形的屏幕截图，而不必担心将鼠标放在图形上以识别系列。

Dygraph.js 似乎只允许一个图例。

我的方法是使用系列名称创建静态图例，但我缺少每个系列的颜色。是否可以识别每个系列的dygraph的颜色？

编辑：我在下面提供了一个示例，其中 "dygraphcolor1" 代表每个系列的颜色。

//script
var serieslabels = [point1, point2, point3]

g = new Dygraph(document.getElementById(chart_title), data,
        {labels: serieslabels,
         legend: 'follow',
         labelsSeparateLines: true,
         labelsDiv: document.getElementById('chart_title_legend'), //remove since not allowed with legend = 'follow'

for (a=1; a < labels.length; a++){

//html via document.write
// this will make a list of each series label displayed in the same color as dygraph.
<p style ="color:dygraphcolor1"> serieslabels[a]</p>

}

Answer 1

好吧，这比我希望的更巧妙，但粗略的想法是在 mouseenter 上设置 legend: 'follow'，在 mouseleave 上设置 legend: 'always'。 dygraphs 不希望您以这种方式更改图例显示，因此之后您必须做一些清理工作：

div.addEventListener('mouseenter', () => {
  g.updateOptions({legend: 'follow'});
});

div.addEventListener('mouseleave', () => {
  g.updateOptions({legend: 'always'});
  // A "follow" legend gets hidden on mouseleave, so make it visible again:
  div.querySelector('.dygraph-legend').style.display='';
  // This repositions it to the top/right of the chart:
  g.plugins_[0].plugin.predraw({dygraph: g});
});

这是一个 complete demo. For customizing the display of the legend, you may also be interested in the legendFormatter 回调。

多个 dygraph 图例

Multiple dygraph legends

python

dygraphs