如何在悬停时添加当前价格线？

Question

我找到了一个可以在 highstock 烛台图表上显示当前价格线的插件，但它只显示最新数据。

我试图找到一种方法来在用户将鼠标悬停在数据上时显示水平价格线。

我认为这可能与工具提示事件有关，但我不知道该怎么做。

有人可以给我提示吗？谢谢，

 tooltop:{
             formatter: function () {

            }
        },

http://jsfiddle.net/RolandBanguiran/nf7ne/

Answer 1

有几种方法可以实现。问题是缺少描述（你想在悬停时显示当前价格，还是实际悬停的值？）。

无论如何，最简单的方法是启用 crosshairs: demo。

另一种方法是 add/remove plotLine on mouseOver 事件 series.point, demo 和代码:

            point: {
                events: {
                    mouseOver: function() {
                         var chart = this.series.chart;

                        chart.yAxis[0].removePlotLine("tooltip-line");
                        chart.yAxis[0].addPlotLine({
                            width: 2,
                            color: "black",
                            id: "tooltip-line",
                            value: this.y
                        });
                    }
                }
            }

如果您想隐藏该行，请使用 mouseOut 事件并像上面那样简单地删除 plotLine。

第三个选项基于以上选项 - 如果您想显示当前价格而不是悬停价格。在这种情况下，更改 plotLine、demo 和代码的值：

            point: {
                events: {
                    mouseOver: function() {
                         var chart = this.series.chart;

                        chart.yAxis[0].removePlotLine("tooltip-line");
                        chart.yAxis[0].addPlotLine({
                            width: 2,
                            color: "black",
                            id: "tooltip-line",
                            value: this.series.yData[this.series.yData.length - 1][0]
                        });
                    },
                    mouseOut: function() {
                        this.series.yAxis.removePlotLine("tooltip-line");
                    }
                }
            }

额外提示：
查看 API 中 plotLines 的更多选项（如破折号样式或标签）。

如何在悬停时添加当前价格线？

How to add current price line on hover?

highstock