javascript - Flot:图例仅在 plotpan 事件发生时更新？

Question

我的图表的图例仅在 plotpan 事件发生时出现。这是我在下面找到的 updateLegend 函数，我确信该程序当然会使用跟踪消息

但是，自从我包含 plotpan 功能以来，图例唯一一次更新是在 plotpan 发生之后。我不确定是什么原因造成的，因此我无法解决这个问题。 Here is the JSFiddle that will be more helpful than the following isolated segment of code.

var updateLegendTimeout = null;
var latestPosition = null;
 function updateLegend(){
        var series = (plot.getData())[0];
        legends.eq(0).text(series.label ="x: " + (local_x)+" y: "+ (local_y));
 }  


placeholder.bind("plothover",  function (event, pos, item) {
if (item){
    local_x = item.datapoint[0].toFixed(2);
        local_y = item.datapoint[1].toFixed(2);
    console.log("x:" + local_x + ", " + "y:" + local_y);
}

if (!updateLegendTimeout){
    updateLegendTimeout = setTimeout(updateLegend, 50);
        updateLegendTimeout = null;
}
});

Answer 1

这行代码到底要做什么？

legends.eq(0).text(series.label ="x: " + (x)+" y: "+ (y));

它似乎是在分配 series.label 但我不相信它实际上是在修改图例 div 的内容。不过，它会在您平移时更新，因为这会强制重绘网格(重绘图例)。

最简单的修复方法是在更改图例后手动调用 setupGrid。

function updateLegend(x,y){
  var series = (plot.getData())[0];
  var legends = $(placeholder_id+ ".legendLabel");
  series.label ="x: " + (x)+" y: "+ (y);
  plot.setupGrid();
  clearTimeout(updateLegendTimeout);
}

不过，这是相对昂贵的(在每次鼠标移动时重新绘制网格)。另一种攻击方式是手动设置图例 div 的文本，但这可能会干扰 flots 内部图例绘制。如果你真的想显示最近的点位置，也许不用管图例，在你自己的 div 中做。

最后，我不太确定您要使用所有这些 setTimeout 去哪里。对我来说似乎过于复杂，您可以将其简化很多。

更新fiddle .