用鼠标移动一条垂直线并找到两个高图的交点

我在页面中有两个折线图。我正在使用高图来绘制图表。用鼠标移动一条垂直线并找到两个高图的交点

我想用鼠标移动移动一条垂直线，并想找出每条图形的垂直线与图形相交处的数据点。

<!DOCTYPE html> 
    <html> 
<head> 

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <style> 
    #reporting { 
    position: absolute; 
    top: 55px; 
    right: 20px; 
    font: 12px Arial, Verdana; 
    color: #666; 
    } 
    </style> 
    <script> 
     $(function() { 
      var $reporting = $('#reporting'); 
      var $reporting1 = $('#reporting1'); 

      $('#container').highcharts({ 
       chart: { 
       }, 
       xAxis: { 
       }, 
       plotOptions: { 
        series: { 
         point: { 
          events: { 
           mouseOver: function() { 
            $reporting.html('x: ' + this.x + ', y: ' + this.y); 
           } 
          } 
         }, 
         events: { 
          mouseOut: function() { 
           $reporting.empty(); 
          } 
         } 
        } 
       }, 
       tooltip: { 
        enabled: false 
       }, 
       series: [{ 
         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
        }] 
      }); 

      //second chart 
      $('#container1').highcharts({ 
       chart: { 
       }, 
       xAxis: { 
       }, 
       plotOptions: { 
        series: { 
         point: { 
          events: { 
           mouseOver: function() { 
            $reporting1.html('x: ' + this.x + ', y: ' + this.y); 
           } 
          } 
         }, 
         events: { 
          mouseOut: function() { 
           $reporting1.empty(); 
          } 
         } 
        } 
       }, 
       tooltip: { 
        enabled: false 
       }, 
       series: [{ 
         data: [9.9, 71.5, 16.4, 129.2, 144.0, 120.0, 135.6, 148.5, 216.4, 194.1, 5.6, 4.4] 
        }] 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="container" style="height: 300px; min-width: 300px"></div> 
    <div id="reporting"></div> 
    <div id="container1" style="height:300px;min-width:300px"></div> 
</body> 
</html>

它所做的是在html中反映x和y坐标。

但是，当鼠标移动到一个图形上时，应绘制一条垂直线，并且它应该反映一条垂直线与两个图形的交点。

来源

2013-12-13 asdfdefsad

你的小提琴不能正常工作，请修理。 –

它正在工作。但它没有按照我的要求工作，我没有找到任何可以制作垂直线的东西。 – asdfdefsad

它根本不起作用。高图不加载。 GET http://code.highcharts.com/highcharts.js 403（禁止） **使用cdn ** –