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

Question

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

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

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

<div id="placeholder1" style="width: 600px; height: 300px; padding: 0px; position: relative; cursor: auto;"></div>

$(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();
        }
    });

});

Answer 2

类似的不同方法是this

JSFillde

此示例仅同步 PANNING。