jqPlot-在多个图表之间同步光标 [英] jqPlot - synchronize cursor across multiple charts
本文介绍了jqPlot-在多个图表之间同步光标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用jqPlot在页面上创建3个单独的图表,是否可以配置jqPlot以便当光标在一个图表上移动时,垂直线也可以在其他图表上移动?
I would like to use jqPlot to create 3 separate charts on a page, is it possible to configure jqPlot so that as the cursor moves across one chart, a vertical line would also move across the other charts?
推荐答案
我还需要同时跟踪2张图表上的垂直线,并以Boro的答案为起点,
I also needed to track a vertical line on 2 charts simultaneously and using Boro's answer as starting point, this is what I came up with:
var mydata1 = [
[0, 3],
[1, 7],
[2, 9],
[3, 1],
[4, 4],
[5, 6],
[6, 8],
[7, 2],
[8, 5]
];
var mydata2 = [
[0, 5],
[1, 4],
[2, 8],
[3, 7],
[4, 2],
[5, 8],
[6, 5],
[7, 1],
[8, 3]
];
$(document).ready(function () {
var plot1 = $.jqplot(
'chart1', [mydata1], {
seriesDefaults: {
showMarker: false
},
cursor: {
show: true,
showTooltip: false,
showVerticalLine: true,
showHorizontalLine: false
},
highlighter: {
show: true,
showTooltip: false
},
canvasOverlay: {
show: true,
objects: [{
verticalLine: {
show: false,
name: "vline1",
xOffset: '-1',
yOffset: '0',
xaxis: "xaxis",
lineWidth: '0.5',
shadow: false
}
}]
}
});
var plot2 = $.jqplot(
'chart2', [mydata2], {
seriesDefaults: {
showMarker: false
},
cursor: {
show: true,
showTooltip: false,
showVerticalLine: true,
showHorizontalLine: false
},
highlighter: {
show: true,
showTooltip: false
},
canvasOverlay: {
show: true,
objects: [{
verticalLine: {
show: false,
name: "vline2",
xOffset: '-1',
yOffset: '0',
xaxis: "xaxis",
lineWidth: '0.5',
shadow: false
}
}]
}
});
var co1 = plot1.plugins.canvasOverlay;
var co2 = plot2.plugins.canvasOverlay;
var line1 = co1.get('vline1');
var line2 = co2.get('vline2');
$("#chart1").bind('jqplotMouseMove', function (ev, gridpos, datapos, neighbor, data) {
line2.options.show = true;
line2.options.x = datapos.xaxis;
co2.draw(plot2);
});
$("#chart2").bind('jqplotMouseMove', function (ev, gridpos, datapos, neighbor, data) {
line1.options.show = true;
line1.options.x = datapos.xaxis;
co1.draw(plot1);
});
$("#chart1").bind('jqplotMouseLeave', function () {
line2.options.show = false;
co2.draw(plot2);
});
$("#chart2").bind('jqplotMouseLeave', function () {
line1.options.show = false;
co1.draw(plot1);
});
});
这篇关于jqPlot-在多个图表之间同步光标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文