Javascript 如何在Highcharts/Highstock上显示x轴上的十字线选定值和y轴上的选定日期？

我正在从事这个项目，其中包括在交互式图表上显示历史数据。我得出结论，Highcharts/Highstock是最好的选择，因为它提供了最多的定制选项。我试图实现的是，当我将鼠标悬停在某个点上时，在x轴和y轴上分别显示选定的值及其相应的日期，这适用于我悬停的每个点。我希望图表的布局与Yahoo图表相似：

如上图所示，无论我停留在哪个点上，十字线都会相应移动，并在x轴上显示所选点的日期，在y轴上显示价格，其中，如果我向左移动，日期标签也会向左移动，y轴上的价格标签也会向左移动，价格标签会根据显示当前股票“收盘”的图表趋势上下移动。我一直在研究如何实现这一点，通过查阅文档和在论坛中挖掘我的方法，但我没有找到任何解决方案。我离这把小提琴很近，我发现：

但是，此小提琴使用

event.PageY

和

event.PageX

而不是库附带的默认十字线。除此之外，它显示了整个价格范围，例如，我只有6个数据点，如果我将光标悬停在这些点上，十字线显示的远不止这些，基本上是整个y轴。如果我离开图表范围，它仍然会显示不正确的数据（负数）

我知道这是可能的，因为我通过查看源代码发现了一个由highcharts/highstock生成的图表，它与Yahoo图表的设计相同，只是略有不同。这是图表：

上图中的黑色水平线（黑色矩形y轴[127.62]）是通过一个插件创建的：

---

如上图所示，是否有生成十字线标签的选项？有文件吗？也许是插件？我愿意接受任何建议，并提前感谢所有你们能提供的帮助。国王问候

你能告诉我在那种情况下哪些值是不正确的吗？因为上面提到的十字准线似乎工作正常。嗨@SebastianBochan如果你看这把小提琴，你会发现如果你在x轴下方悬停，数值会显示为负值，这与图表标准不符，十字准线彼此分离。假设，指针的位置和坐标视图上的值是正确的，但这并不是我真正想要的。我想要实现的是一个类似的原则，但是默认的十字线只在标签中显示数据点的值。转到yahoo.finance，将鼠标悬停在交互式图表上，您会发现一个差异。您可以添加一个条件，检查鼠标是否“超出绘图区域”。示例：谢谢@SebastianBochan这真的很接近了。这可以通过库附带的默认十字线来完成吗？因此，不使用图表选项下的

event.PageY

和

event.PageX

选项，例如

tooltip.crosshair

，然后使用代码在y轴上显示与十字光标y坐标相等的价格？谢谢你容忍我。顺致敬意，还有一件事可能会有帮助。看看这个，它包含了我问题中的图表，也使用了highstock。如果你点击烛台，那正是我要寻找的（那些十字光标），我试着查看源代码，但不知何故，图表的构建方式非常复杂。该网站使用一个外部javascript作为“自定义”图表，我试图阅读，但什么也找不到。我知道答案就在那里，但遗憾的是，有时候我的javascript知识没有达到这样的水平。