我能够使用选择插件选择我的情节区域并放大。
现在我希望能够在选择缩放和鼠标滚轮缩放+平移之间切换。
作为测试,我想在选择并放大某些内容后立即禁用选择,同时使用鼠标滚轮激活平移和缩放。
我可以使用getOptions()
设置选项,但我无法更改选择/缩放/平移。我检查了options对象,它确实发生了变化(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();
}
我做错了什么?
答案 0 :(得分:3)
我无法弄清楚如何解决这个问题,所以我决定让zoom.interactive = true
和selection.mode = "xy"
都离开。
对于平移,我在绘图的侧面添加了4个按钮(如导航插件示例中的箭头)。虽然使用鼠标进行平移非常酷,但无论如何用户都必须在模式之间切换(缩放+平移或选择缩放)。
虽然这不是我的问题的答案,但如果其他人正在寻找一种选择/缩放/平移的方法,这个解决方案将起作用。
答案 1 :(得分: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代码来绑定和取消绑定事件处理程序会更好,但这更简单。
答案 2 :(得分:0)
我找到了一个很好的解决方案: 使用当前数据和选项再次绘制图。
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);
希望有所帮助