如何在 Flot 中停用选择并激活缩放/平移？答案

【问题标题】：How do I deactivate selection and activate zoom/pan in Flot?如何在 Flot 中停用选择并激活缩放/平移？
【发布时间】：2017-04-28 17:45:21
【问题描述】：

我能够使用选择插件来选择我的绘图区域并放大。

现在我希望能够在选择缩放和鼠标滚轮缩放+平移之间切换。

作为测试，我想在选择并放大某些内容后立即禁用选择，同时使用鼠标滚轮激活平移和缩放。

我可以使用getOptions() 设置选项，但我无法更改选择/缩放/平移。我检查了选项对象，它确实发生了变化 (interactive = true)。我用draw() 重新绘制了绘图，但是选择/缩放/平移没有改变。

代码可以让我选择和缩放，仅此而已：

$("#chart1").bind("plotselected", function (event, ranges) {
    var o=plot.getOptions();
    o.xaxes[0].min = ranges.xaxis.from;
    o.xaxes[0].max = ranges.xaxis.to;
    o.yaxes[0].min = ranges.yaxis.from;
    o.yaxes[0].max = ranges.yaxis.to;
    // block 1: not working as expected, although the options object does change                                                                                                                                                                     
    o.pan.interactive = true;
    o.zoom.interactive = true;
    o.selection.mode = null;
    // block1 end                                                                                                                                                                                
    plot.setupGrid();
    plot.draw();
    plot.clearSelection();
}

我做错了什么？

【问题讨论】：

标签： javascript jquery flot

【解决方案1】：

我不知道如何解决这个问题，所以我决定离开zoom.interactive = true 和selection.mode = "xy"。

对于平移，我在绘图的一侧添加了 4 个按钮（如导航插件示例中的箭头）。虽然用鼠标平移真的很酷，但无论如何用户都必须在模式之间切换（缩放+平移或选择缩放）。

虽然这不是我的问题的答案，但如果其他人正在寻找一种进行选择/缩放/平移的方法，这个解决方案将起作用。

【讨论】：

如果您查看日期，另一个答案是在 2014 年 1 月发布的，而我在 2013 年 10 月发布了这个答案，比之前的好几个月...

【解决方案2】：

为了在 Flot 0.8.2 中进行这项工作，我对 2 个插件进行了小幅修改。

在 jquery.flot.navigate.js 中的function onDragStart(e) 中，更改

if (e.which != 1)  // only accept left-click

到

if (e.which != 1 || !plot.getOptions().pan.interactive)  // only accept left-click

在 jquery.flot.selection.js 中的 function onMouseDown(e) 中，更改

if (e.which != 1)  // only accept left-click

到

if (e.which != 1 || !plot.getOptions().selection.mode)  // only accept left-click

在启用这两个选项的情况下初始化您的绘图，否则事件处理程序将不会被禁用的选项绑定。然后禁用其中一个选项。

var plot = $.plot ($("#chart1"), data, {selection:{mode:"xy"}, pan:{interactive:true}});
plot.getOptions().selection.mode = null;

如果我修改了 Flot 代码以绑定和取消绑定事件处理程序会更好，但这更简单。

【讨论】：

感谢分享这个解决方案！抱歉，我花了这么长时间才回复，我在做其他项目，忘记了这个。我尝试了您的解决方案，但它对我不起作用。只有平移响应，但效果不佳。您不应该也激活绘图选项中的缩放吗？不然怎么缩放？
是的，您需要添加zoom.interactive = true。我在专注于棘手的部分时忽略了它：在平移和选择之间切换。缩放应该是微不足道的。

【解决方案3】：

我找到了一个很好的解决方案：使用当前数据和选项再次绘制绘图。

plot = $.plot("#flotplaceholder",data, options);

//更改选项以启用/禁用平移/选择

            var theOptions = plot.getOptions();
            if (actionMode == "pan"){
                theOptions.pan.interactive = true;
                theOptions.selection.mode = null;
            }else if(actionMode == "select"){
                theOptions.pan.interactive = false;
                theOptions.selection.mode = "xy";
            }

// 重绘剧情

plot = $.plot("#flotplaceholder", plot.getData(), theOptions);

希望对你有帮助

【讨论】：