我在一个页面中有两个折线图。我正在使用 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>
它的作用是反射(reflect) html 中的 x 和 y 坐标。
但是当鼠标在一个图表中移动时，应该绘制一条垂直线，并且它的 html 应反射(reflect)一条垂直线与两个图表的交点。
最佳答案
您可以通过使用十字准线选项、共享工具提示选项以及通过在单个图表上绘制两条线(使用 2 个不同的堆叠 x 轴)来近似这一点。
请参阅此示例:
在我的示例中，我在两个图表之间有一个固定位置的工具提示，并且我添加了一个单击事件来打开带有更详细工具提示的 jquery ui 对话框。但您可以只使用普通的工具提示...
十字线选项:
关于javascript - 用鼠标移动一条垂直线并找到与两个 Highcharts 的交点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20561949/