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

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

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

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:

确定