多个 dygraph 图例答案

【问题标题】：Multiple dygraph legends多个 dygraph 图例
【发布时间】：2020-06-02 07:10:13
【问题描述】：

我想显示 dygraph 图例选项“始终”和“跟随”的组合。使用“跟随”的缺点是，如果没有鼠标悬停在图表上，则没有图例。如果没有鼠标悬停，我想在单独的 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>

}

【问题讨论】：

你能分享一个代码示例吗？
感谢您查看@danvk，我已经提供了我的意图的示例代码，但显然对于如何最好地获取每个系列的颜色信息很灵活。

标签： python dygraphs

【解决方案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。对于自定义图例的显示，您可能还对legendFormatter 回调感兴趣。

【讨论】：