英文:
Annotation does not apply label height and width configuration, how to apply shape borderRadius configuration in highcharts
问题
在上面的配置中,
- 对于点3 - 有没有配置可以像我们在点4的标签注释中一样为形状添加边框半径?
- 对于点4 - 有没有配置可以像我们在点3的形状注释中一样为标签添加宽度和高度?
英文:
Live demo with steps to reproduce
https://jsfiddle.net/ankitkumar148/e8xrvc65/11/
Configuration -
annotations: [{
shapes: [ {
point: '3',
type: 'rect',
width: 20,
height: 20,
x: -10,
y: -25
}],
labels: [ {
point: '4',
borderRadius: 2,
borderWidth: 2,
borderColor: 'red',
style: {
fontSize: '12px',
width: 20,
height: 20
},
shape: 'rect',
text: ' '
}]
}]
In above configuration,
- for point 3 - Is there any configuration to add border radius to shape, just like we have for point 4 with label annotation ?
- for point 4 - Is there any configuration to add width and height to label, just like we have for point 3 with shape annotation ?
答案1
得分: 1
这是您要翻译的代码部分:
chart: {
type: 'column',
events: {
render: function() {
const labels = this.annotations[0].labels;
const shapes = this.annotations[0].shapes;
shapes[0].graphic.attr({
rx: 5,
ry: 5
});
labels[1].graphic.box.attr({
width: 100,
height: 100
});
}
}
}
如果您需要更多帮助,请随时提出。
英文:
It is not possible through API options, but you can modify the created SVG elements in some chart events. For example:
chart: {
type: 'column',
events: {
render: function() {
const labels = this.annotations[0].labels;
const shapes = this.annotations[0].shapes;
shapes[0].graphic.attr({
rx: 5,
ry: 5
});
labels[1].graphic.box.attr({
width: 100,
height: 100
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/0mxezay8/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论