在Highcharts中,当图表发生变化时,如何将注释随图表一起移动



Highcharts是否允许您确保在调整图表大小时(如果图表显示在较小的屏幕上,或者是高亮显示的图表,则有必要(注释随图表一起移动。如果是的话,有人能告诉我如何做到这一点吗?因为我需要这个来满足我的需求。

以下是我拥有的注释代码:

chart: {
type: 'bubble',
zoomType: 'xy',
events: {
load() {
const chart = this;
chart.renderer.text('← More Disruptive', 290, 20)
.attr({ zIndex: 10 })
.css({ fontSize: '12px', color: '#666666'})
.add();
chart.renderer.text('Less Disruptive →', 440, 20)
.attr({ zIndex: 10 })
.css({ fontSize: '12px', color: '#666666'})
.add();
chart.renderer.text('Greatly Decreased ↑', 685, 140)
.attr({ zIndex: 10 })
.css({ fontSize: '12px', color: '#666666'})
.add();
chart.renderer.text('Greatly Increased ↓', 688, 205)
.attr({ zIndex: 10 })
.css({ fontSize: '12px', color: '#666666'})
.add();
}
}
}

https://jsfiddle.net/samwhite/jy4dcwb7/

如果将注释链接到一个点:http://jsfiddle.net/BlackLabel/sfo3L704/或将其连接到模拟点:http://jsfiddle.net/BlackLabel/4ouwn19j/它将作出反应。

annotations: [{
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 3,
y: 6
}
}]
}]

在其他情况下,您需要在每次调整大小后计算注释的位置(例如chart.redraw事件(。


API参考:https://api.highcharts.com/highcharts/annotations.labels.point

最新更新