Flot Charts - 使用 flot.navigate 插件同时拖动/缩放两个或多个图表 [英] Flot Charts - Drag / Zoom two or more charts at the same time using flot.navigate plugin

问题描述

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

I have two or more flot charts displayed on the same page and use flot.navigate plugin for dragging and zooming. I can zoom and drag individual chart independent of other charts, but I would like to have other charts move or zoom together with the chart on which navigation action is applied. Some pages might have only two charts where some have five or six on the same page

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

My fiddle has two charts displayed and one can zoom (mouse scroll) or drag only one chart. Any ideas or help with this is really appreciated. Thanks.

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);


});

推荐答案

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

I modified your jsfiddle: http://jsfiddle.net/cPNNJ/4/

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

I created an array of plot objects. Each $.plot() is stored in the array. Next, an event handler needs to be created for the plothover and plotzoom events.

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

When the event handler is called, the code will loop through the plot objects in the plot array and set the x and y axis min and max values to the passed plot objects x and y axis min and max values.

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

});

这篇关于Flot Charts - 使用 flot.navigate 插件同时拖动/缩放两个或多个图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！