Highcharts中Annotation的形状圆角与标签宽高配置问询

配置代码 #

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: ' '
    }]
}]

问题解答 #

1. Point 3的shape注释能否设置borderRadius？
   当前版本的shape注释中，rect类型没有内置的borderRadius配置项。如果需要圆角矩形效果，你可以：

• 替换为circle类型的shape（仅适用于正圆场景）；
• 给shape对应的DOM元素添加自定义CSS，通过border-radius属性实现圆角。

2. Point 4的label注释能否直接设置width/height？
   label没有和shape一样的顶层width/height参数，但可以通过style对象中的width和height属性来设置，就像你配置里已经写的那样。这种方式完全可以达到控制标签宽高的目的，效果和shape的宽高配置一致。

内容的提问来源于stack exchange，提问作者Dreamweaver