我在页面中有两个折线图。我正在使用图表绘制图表。
我想用鼠标移动一条垂直线，并想找出垂直线与图形相交的每个图形的数据点。
<!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应当反映一条垂直线与两个图形的交点。
最佳答案
您可以通过使用十字线选项，共享的工具提示选项，以及在具有2个不同的堆叠x轴的单个图表上绘制两条线来对此进行近似。
看到这个example：
http://jsfiddle.net/jlbriggs/LHZ3E/5/
在我的示例中，我有一个固定位置的工具提示，位于两个图表之间，并且添加了click事件以打开带有更详细的工具提示的jquery ui对话框。但是您可以只使用普通的工具提示...
十字线选项：
http://api.highcharts.com/highcharts#tooltip.crosshairs