多重动态图表图例

Question

我想显示动态图图例选项“始终”和“跟随”的组合。使用“跟随”的缺点是，如果图形上没有鼠标，则没有图例。如果没有鼠标悬停，我想在一个单独的div中显示默认的图例，类似于带有标签div集的图例“始终”。这将允许用户拍摄图形的屏幕截图，而不用担心将鼠标放在图形上以识别序列

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'。动态图不希望您以这种方式更改图例显示，因此您必须在之后进行一些清理：

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。对于自定义图例的显示，您可能还对^{}回调感兴趣