Question

我找到了一个能够在高品牌烛台图表上显示当前价格线的插件，但它只显示最新数据。

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

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

有人能给我一个暗示吗？谢谢，

 tooltop:{
             formatter: function () {

            }
        },

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

Answer 1

有几种方法可以实现这一目标。问题有点缺失描述（您想在悬停时显示当前价格，还是实际悬停值？）。

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

另一种方法是为plotLine，demo和代码添加/删除mouseOver事件series.point：

            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的更多选项（如短划线样式或标签）。

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

1 个答案: