用鼠标移至一条垂直线并找到两个高图的交点
[英]move one vertical line with mouse over and find intersection point with two highcharts
问题描述
I have two line charts in a page. 
我在页面中有两个折线图。 I am using highcharts for plotting charts. 我正在使用图表绘制图表。
I want to move one vertical line with mouse move and want to find out data points of each graph at which vertical line intersects graph. 我想用鼠标移动一条垂直线，并想找出垂直线与图形相交的每个图形的数据点。
<!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>
what it does is reflecting x and y coordinate in html. 它所做的是在html中反映x和y坐标。
But on mouse move in one graph one vertical line should be drawn and it html should reflect intersection point of one vertical line with both graphs. 但是，当鼠标在一个图形中移动时，应绘制一条垂直线，而html应当反映一条垂直线与两个图形的交点。
2 个解决方案
解决方案1
2 已采纳 2013-12-13 19:50:34
You can approximate this by using the crosshairs option, the shared tooltip option, and by plotting both lines on a single chart, with 2 different stacked x axes. 您可以通过使用十字线选项，共享的工具提示选项，以及在具有2个不同的堆叠x轴的单个图表上绘制两条线，来对此进行近似。
See this example : 看这个example ：
In my example, I have a fixed position tooltip that sits between the 2 charts, and I have added a click event to open a jquery ui dialog with a more detailed tooltip. 在我的示例中，我有一个固定位置的工具提示，位于两个图表之间，并且添加了一个click事件以使用更详细的工具提示打开一个jQuery UI对话框。 But you can just have a normal tooltip instead... 但是您可以只使用普通的工具提示...
crosshairs options: 十字线选项：
解决方案2
1 2013-12-13 10:31:32
Something like this is not supported, however you can achieve that by adding mouse move event for chart, where you will get event.pageX and event.pageY . 不支持这样的操作，但是可以通过为图表添加鼠标移动事件来实现，您将在其中获得event.pageX和event.pageY 。 Now use axis.toValue() to get value, and display that on a chart. 现在使用axis.toValue()获取值，并将其显示在图表上。 To draw that line you can use plotLine and updating that line. 要绘制该线，可以使用plotLine并更新该线。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.