jqPlot - 跨多个图表同步光标答案

【问题标题】：jqPlot - synchronize cursor across multiple chartsjqPlot - 跨多个图表同步光标
【发布时间】：2012-05-28 10:38:38
【问题描述】：

我想使用 jqPlot 在一个页面上创建 3 个单独的图表，是否可以配置 jqPlot 以便当光标在一个图表上移动时，一条垂直线也会在其他图表上移动？

【问题讨论】：

标签： jqplot

【解决方案1】：

我还需要同时在 2 个图表上跟踪一条垂直线，并以 Boro 的答案为起点，this 是我想出的：

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

Here's the demo

【讨论】：

【解决方案2】：

是的，你可以做到。在您的方法中，您必须在绘图上跟踪鼠标位置，例如：

$('#chart').bind('jqplotMouseMove', function(ev, seriesIndex, pointIndex, data) {
    //do your painting here
});

然后，在您的情节中鼠标的每一次移动，您都会在另一个情节的画布上进行自定义绘画。我在this example showing highlight of a plot's data from code level.做了一些自定义绘画

【讨论】：