注解不适用标签高度和宽度配置,如何在highcharts中应用形状的borderRadius配置

huangapple go评论90阅读模式
英文:

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 -

  1. annotations: [{
  2. shapes: [ {
  3. point: '3',
  4. type: 'rect',
  5. width: 20,
  6. height: 20,
  7. x: -10,
  8. y: -25
  9. }],
  10. labels: [ {
  11. point: '4',
  12. borderRadius: 2,
  13. borderWidth: 2,
  14. borderColor: 'red',
  15. style: {
  16. fontSize: '12px',
  17. width: 20,
  18. height: 20
  19. },
  20. shape: 'rect',
  21. text: ' '
  22. }]
  23. }]

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

这是您要翻译的代码部分:

  1. chart: {
  2. type: 'column',
  3. events: {
  4. render: function() {
  5. const labels = this.annotations[0].labels;
  6. const shapes = this.annotations[0].shapes;
  7. shapes[0].graphic.attr({
  8. rx: 5,
  9. ry: 5
  10. });
  11. labels[1].graphic.box.attr({
  12. width: 100,
  13. height: 100
  14. });
  15. }
  16. }
  17. }

如果您需要更多帮助,请随时提出。

英文:

It is not possible through API options, but you can modify the created SVG elements in some chart events. For example:

  1. chart: {
  2. type: 'column',
  3. events: {
  4. render: function() {
  5. const labels = this.annotations[0].labels;
  6. const shapes = this.annotations[0].shapes;
  7. shapes[0].graphic.attr({
  8. rx: 5,
  9. ry: 5
  10. });
  11. labels[1].graphic.box.attr({
  12. width: 100,
  13. height: 100
  14. });
  15. }
  16. }
  17. }

Live demo: https://jsfiddle.net/BlackLabel/0mxezay8/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

huangapple
  • 本文由 发表于 2023年3月12日 10:28:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/75710760.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定