Question

我在页面中有两个折线图。我使用highcharts绘制图表。

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

 <!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坐标。

但是在一个图表中鼠标移动时，应该绘制一条垂直线，并且html应该反映一条垂直线与两个图形的交点。

Answer 1

您可以使用十字准线选项，共享工具提示选项以及在单个图表上绘制两条线，使用两个不同的堆叠x轴来近似。

请参阅此example：

http://jsfiddle.net/jlbriggs/LHZ3E/5/

在我的示例中，我有一个位于两个图表之间的固定位置工具提示，我添加了一个click事件来打开一个带有更详细工具提示的jquery ui对话框。但你可以只用一个正常的工具提示......

十字准线选项：

http://api.highcharts.com/highcharts#tooltip.crosshairs

Answer 2

不支持此类内容，但您可以通过为图表添加鼠标移动事件来实现此目的，您将获得event.pageX和event.pageY。现在使用axis.toValue()获取值，并在图表上显示该值。要绘制该行，您可以使用plotLine并更新该行。

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

2 个答案: