jqPlot - синхронизировать курсор на нескольких диаграммах

Question

Я хотел бы использовать jqPlot для создания 3 отдельных диаграмм на странице, можно ли настроить jqPlot так, чтобы при перемещении курсора по одной диаграмме вертикальная линия также перемещалась по другой графики?

Answer 1

Я также необходимо отслеживать вертикальную линию на 2 графиках одновременно и используя ответ боро в качестве отправной точки, 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

Answer 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.