绘图图表 – 使用flot.navigate插件同时拖动/缩放两个或多个图表

我在同一页面上显示了两个或多个flot图表，并使用flot.navigate插件进行拖动和缩放。 我可以独立于其他图表缩放和拖动单个图表，但我希望其他图表与应用导航操作的图表一起移动或缩放。 有些页面可能只有两个图表，其中一些页面在同一页面上有五个或六个

我的小提琴有两个图表显示，一个可以缩放（鼠标滚动）或只拖动一个图表。 任何想法或帮助都非常感谢。 谢谢。

http://jsfiddle.net/mashinista/cPNNJ/

 $(function () { var d1 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) d1.push([i, Math.sin(i)]); var data = [ d1 ]; var d2 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) d2.push([i, Math.cos(i)]); var data2 = [ d2 ]; var options = { series: { lines: { show: true }, shadowSize: 0 }, xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, zoom: { interactive: true }, pan: { interactive: true } }; var plot = $.plot(placeholder, data, options); var plot = $.plot(placeholder1, data2, options); }); 

Answer 1

我修改了你的jsfiddle： http ： //jsfiddle.net/cPNNJ/4/

我创建了一个绘图对象数组。 每个$.plot()都存储在数组中。 接下来，需要为plothover和plotzoom事件创建事件处理程序。

调用事件处理程序时，代码将遍历绘图数组中的绘图对象，并将x和y轴的最小值和最大值设置为传递的绘图对象x和y轴的最小值和最大值。

 $(function () { var plots = []; var placeholders = $(".flot"); var d1 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) d1.push([i, Math.sin(i)]); var data = [ d1 ]; var d2 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) d2.push([i, Math.cos(i)]); var data2 = [ d2 ]; var options = { series: { lines: { show: true }, shadowSize: 0 }, xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, zoom: { interactive: true }, pan: { interactive: true } }; plots.push($.plot(placeholder, data, options)); plots.push($.plot(placeholder1, data2, options)); placeholders.bind("plotpan plotzoom", function (event, plot) { var axes = plot.getAxes(); for(var i=0; i< plots.length; i++) { plots[i].getOptions().xaxes[0].min = axes.xaxis.min; plots[i].getOptions().xaxes[0].max = axes.xaxis.max; plots[i].getOptions().yaxes[0].min = axes.yaxis.min; plots[i].getOptions().yaxes[0].max = axes.yaxis.max; plots[i].setupGrid(); plots[i].draw(); } }); });