如何实现Dygraph图例always与follow模式的组合显示？

刚好我之前也遇到过类似的需求，其实Dygraph提供了一个很方便的方法来获取系列颜色——getColors()，用它就能实现你想要的「静态默认图例+跟随鼠标的follow图例」效果，具体做法如下：

第一步：准备HTML结构 #

除了图表容器，单独创建一个用来放静态图例的div，避免和Dygraph的内置图例逻辑冲突：

<div id="chart_title"></div>
<div id="static-legend" style="margin-top: 10px; padding-left: 10px;"></div>

第二步：初始化Dygraph并生成静态图例 #

先以follow模式初始化图表，再通过getColors()方法获取各系列的颜色，手动生成静态图例元素：

// 定义系列标签和示例数据
var serieslabels = ['x轴', 'point1', 'point2', 'point3'];
var data = [
  [1, 10, 22, 35],
  [2, 18, 28, 32],
  [3, 15, 25, 38],
  [4, 20, 30, 29]
];

// 初始化Dygraph，启用follow模式图例
var g = new Dygraph(document.getElementById('chart_title'), data, {
  labels: serieslabels,
  legend: 'follow',
  labelsSeparateLines: true,
  // 注意：follow模式下不能设置labelsDiv，所以我们手动生成静态图例
});

// 获取Dygraph为各系列分配的颜色数组（第一个颜色对应x轴，可跳过）
var seriesColors = g.getColors();

// 获取静态图例容器
var staticLegendContainer = document.getElementById('static-legend');

// 循环生成每个系列的静态图例项
for (var a = 1; a < serieslabels.length; a++) {
  var legendItem = document.createElement('p');
  // 绑定对应系列的颜色
  legendItem.style.color = seriesColors[a];
  // 设置系列名称
  legendItem.textContent = serieslabels[a];
  // 增加一点样式让布局更美观
  legendItem.style.margin = '4px 0';
  staticLegendContainer.appendChild(legendItem);
}

关键说明 #

• g.getColors()方法会返回Dygraph自动（或你自定义）分配的所有系列颜色数组，顺序和labels数组完全对应，保证静态图例颜色和图表系列颜色一致。
• 如果你需要自定义系列颜色，只需在初始化Dygraph时通过colors选项指定即可，getColors()会返回你自定义的颜色值：

  var g = new Dygraph(document.getElementById('chart_title'), data, {
    labels: serieslabels,
    legend: 'follow',
    labelsSeparateLines: true,
    colors: ['#ff4444', '#00C851', '#33b5e5'] // 自定义系列颜色
  });
  

这样设置后，用户无需鼠标悬停就能在静态div里看到图例（方便截图），鼠标悬停时又能看到跟随鼠标的follow模式图例，完美解决了两种模式不能同时启用的问题。

内容的提问来源于stack exchange，提问作者Tim