在HighStock中将鼠标悬停绘制另一个图表或系列 [英] Draw another chart/or series on mouse hover in HighStock

问题描述

我有一个指标，它是x，y的函数.

I have an indicator which is a function of x, y.

如何在图表上方绘制此指标?

How can i draw this indicator on top of chart?

让我们在这里说 https://jsfiddle.net/yv3pehj8/

plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function () {
                        var chart = this.series.chart;
                        if (!chart.lbl) {
                            chart.lbl = chart.renderer.label('')
                                .attr({
                                    padding: 10,
                                    r: 10,
                                    fill: Highcharts.getOptions().colors[1]
                                })
                                .css({
                                    color: '#FFFFFF'
                                })
                                .add();
                        }
                        chart.lbl
                            .show()
                            .attr({
                                text: 'x: ' + this.x + ', y: ' + this.y
                            });
                    }
                }
            }

我不想在拐角处打印x，y值，而是想以与[x-10，x + 10]范围内的悬停点成45度角绘制一条线.我该如何以最高效的方式做到这一点?

Instead of printing x,y value on the corner, I wanted to draw a line at an angle of 45 degrees to the hover point ranging from [x-10, x+10]. How could I do it in the most performant way?

TIA

编辑 非常感谢您的解决方案.使它更加复杂.我希望达到此图像中所示的以下效果[]

EDIT Many thanks for the solution. To make it a bit more complicated. i want to reach the following effect as seen in this image []

我想绘制蓝色/红色曲线，就像您在鼠标悬停时在图像中看到的那样..您碰巧对此@ppotaczek有解决方案吗?

i want to draw the blue/red curves as you see in the image on mouse hover.. Would you happen to have a solution for this @ppotaczek??

推荐答案

代替呈现标签，您可以呈现path:

Instead of rendering the label, you can render a path:

plotOptions: {
    series: {
        point: {
            events: {
                mouseOver: function() {
                    var chart = this.series.chart,
                        path = [
                            'M',
                            chart.plotLeft + this.plotX - 10,
                            chart.plotTop + this.plotY - 10,
                            'L',
                            chart.plotLeft + this.plotX + 10,
                            chart.plotTop + this.plotY + 10
                        ];

                    if (!chart.lbl) {
                        chart.lbl = chart.renderer.path(path)
                            .attr({
                                'stroke-width': 2,
                                stroke: 'red'
                            })
                            .add();
                    }
                    chart.lbl
                        .show()
                        .attr({
                            d: path
                        });
                }
            }
        },
        ...
    }
}

---

实时演示: https://jsfiddle.net/BlackLabel/zo46fuxb/

API参考: https://api .highcharts.com/class-reference/Highcharts.SVGRenderer#path

这篇关于在HighStock中将鼠标悬停绘制另一个图表或系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！