多重笔画图例

Question

我想显示书画图例选项“总是”和“跟随”的组合。使用“跟随”的缺点是，如果没有鼠标悬停在图形上，则没有图例。如果没有鼠标悬停，我想在单独的div中显示默认图例，类似于带有“ labelsDiv”设置的“始终”图例。这将使用户可以拍摄图表的屏幕截图，而不必担心将鼠标放在图表上以识别序列。

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

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

编辑：我在下面提供了一个示例，其中“ 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。为了自定义图例的显示，您可能还对legendFormatter回调感兴趣。