highcharts 图表中,得知一个点的数据,如何获取这个点在highcharts图表里面的坐标
时间: 2024-04-11 15:33:31 浏览: 96
在vue项目中引入highcharts图表的方法
要获取Highcharts图表中特定点的坐标,可以使用`chart`对象的`pointer`和`chartX`、`chartY`属性来实现。下面是一个示例代码,展示了如何获取鼠标点击位置的数据点坐标:
```javascript
// 假设你有一个 Highcharts 图表实例 chart
// 添加点击事件监听器
chart.container.onclick = function(e) {
// 获取点击位置相对于图表的 X 和 Y 坐标
var chartX = e.chartX || (e.pageX - chart.plotLeft - chart.container.offsetLeft);
var chartY = e.chartY || (e.pageY - chart.plotTop - chart.container.offsetTop);
// 使用 chart.pointer 对象的 normalize 方法获取最接近点击位置的数据点
var point = chart.pointer.normalize({ chartX: chartX, chartY: chartY });
// 输出数据点在图表中的坐标
console.log('数据点坐标:', point.chartX, point.chartY);
// 输出数据点对应的值
console.log('数据点值:', point.x, point.y);
};
```
上述代码中,我们首先获取了点击位置相对于图表容器的坐标。然后使用`chart.pointer.normalize()`方法,将点击位置的像素坐标转换为图表中的坐标。最后,我们可以通过`point.chartX`和`point.chartY`获取数据点在图表中的坐标,通过`point.x`和`point.y`获取该数据点的值。
希望以上代码能够帮助到你获取Highcharts图表中特定点的坐标。
阅读全文