在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屋!