Sencha GXT4：如何在环形饼图内部显示文本？

这个需求完全可行，GXT 4.0.0支持通过自定义饼图系列的渲染逻辑来实现环形内部标签，以下是具体实现思路：

实现方案1：扩展PieSeries自定义中心固定标签 #

通过继承PieSeries类，重写标签渲染方法，在环形中心区域手动绘制固定文本标签：

public class CustomInnerLabelPieSeries<T> extends PieSeries<T> {
    private String innerLabelText;

    public void setInnerLabelText(String text) {
        this.innerLabelText = text;
        redraw();
    }

    @Override
    protected void renderLabels(SvgChart<T> chart, Surface surface, List<PieSlice<T>> slices) {
        super.renderLabels(chart, surface, slices);
        
        if (innerLabelText == null || innerLabelText.isEmpty()) {
            return;
        }
        
        // 获取环形饼图的中心坐标
        Point center = getCenter();
        // 创建文本元素并设置样式
        Text innerLabel = new Text(center.getX(), center.getY(), innerLabelText);
        innerLabel.setTextAnchor(TextAnchor.MIDDLE);
        innerLabel.setFill("#222");
        innerLabel.setFontSize(16);
        innerLabel.setFontWeight(FontWeight.BOLD);
        
        // 添加到画布中，确保层级在饼图切片之上
        surface.add(innerLabel);
    }
}

使用时，直接替换原有PieSeries为自定义类，通过setInnerLabelText设置内部标签内容即可。

实现方案2：调整LabelConfig实现切片关联内部标签 #

如果需要的是与切片关联的内部标签（而非中心固定文本），可以通过配置LabelConfig的位置和偏移量实现：

PieSeries<DataModel> pieSeries = new PieSeries<>();
LabelConfig labelConfig = new LabelConfig();
// 设置标签在切片内部
labelConfig.setPosition(LabelPosition.INSIDE);
// 调整偏移量，让标签落在环形的空白区域（负值向内偏移，根据环形宽度调整）
labelConfig.setOffset(-20); 
pieSeries.setLabelConfig(labelConfig);

注意事项 #

• 若出现文本被切片遮挡的情况，可通过调整Surface元素的添加顺序，或设置文本的zIndex属性来确保标签可见。
• 动态更新标签内容时，调用pieSeries.redraw()触发重绘即可。

内容的提问来源于stack exchange，提问作者Méndres