Dygraph：如何在图例中隐藏x，y值？

Question

在dygraph库的帮助下生成轨道时，我设置了图例：always（即使没有鼠标悬停，也会显示该特定轨道上存在系列名称的图例）。但是当我移动到某个图形时，图例会更改并显示该特定鼠标指针上每个系列的值。我不希望图例改变，它应该只显示系列名称而不是值。我正在使用JavaScript来实现我的应用程序。有什么办法吗？

Answer 1

可能足够好的一个技巧是为每个轴提供自定义valueFormatter函数，它只返回一个空字符串：

axes: {x: {valueFormatter: function (x) {return ''}},
   y: {valueFormatter: function (y) {return ''}},
   y2: {valueFormatter: function (y2) {return ''}}
}

这可以防止显示值，但仍会在行样本和'：'字符之间切换，具体取决于鼠标的位置。

Answer 2

目前没有简单的方法可以做到这一点。您最好的选择是使用dygraphs的API自己生成图例，或者在图表上抛出一个透明的div来捕获所有鼠标事件。

Answer 3

嘛！这可能不是一个好方法，但我找到了另一种方法。在dygraph.js中声明了一个新的布尔变量，用于检查用户是否希望在图例上看到x-y值。在函数generateLegendHTML（在legend.js中定义）中使用此变量，我已使控件始终进入第一个if循环。这使得dygraph始终显示静态图例。

Answer 4

您可以执行以下操作 -

第0步 - 添加一些必要的选项和标签 -

labelsDiv: document.getElementById("labels"),// in the dygraph options

<div id="labels"></div> <!-- Add this somewhere in your HTML-->

第1步 - 声明变量 -

var defaultLabelHTML = undefined; 

第2步 - 使用drawCallback选项 -

drawCallback: function(dygraph, is_initial){
if (is_initial)
{
defaultLabelHTML = document.getElementById("labels").innerHTML;
}
},

第3步 - 使用highlightCallback选项 -

function(e, x, pts, row) 
{
document.getElementById("labels").innerHTML = defaultLabelHTML;
}