[英]Flot Charts - Drag / Zoom two or more charts at the same time using flot.navigate plugin
我在同一頁面上顯示了兩個或更多的浮圖,並使用 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);
});
我修改了你的 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();
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.