You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在MPAndroidChart(v3.0.3)中用图片而非颜色填充饼图切片?

实现方案:用BitmapShader自定义饼图切片填充图案

当然可以实现这个需求!我之前在使用MPAndroidChart 3.x版本时也做过类似的自定义填充效果,给你分享具体的实现思路和代码:

MPAndroidChart并没有直接提供图案填充的API,但我们可以通过自定义Paint的Shader来实现,核心思路是用BitmapShader将点状图案的Bitmap作为填充纹理,应用到指定的饼图切片上。

步骤1:准备点状图案的Bitmap

你可以直接使用资源中的图片,也可以代码生成一个简单的点状图案:

private Bitmap createDotPatternBitmap() {
    // 创建一个20x20的Bitmap作为纹理单元
    Bitmap bitmap = Bitmap.createBitmap(20, 20, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    // 填充背景色(建议和饼图背景一致或者你需要的底色)
    canvas.drawColor(Color.WHITE);
    
    Paint dotPaint = new Paint();
    dotPaint.setColor(Color.parseColor("#FF6200EE")); // 点状的颜色
    dotPaint.setAntiAlias(true);
    // 在Bitmap中心绘制一个圆点
    canvas.drawCircle(10, 10, 4, dotPaint);
    
    return bitmap;
}

步骤2:自定义PieRenderer控制切片绘制

因为默认的PieRenderer在绘制时可能会重置Paint的属性,所以最可靠的方式是自定义Renderer,针对目标切片应用Shader:

public class PatternPieRenderer extends PieRenderer {
    private final Bitmap patternBitmap;
    private final int targetSliceIndex;

    public PatternPieRenderer(PieChart chart, PieDataProvider dataProvider, ChartAnimator animator, ViewPortHandler viewPortHandler, Bitmap patternBitmap, int targetIndex) {
        super(chart, dataProvider, animator, viewPortHandler);
        this.patternBitmap = patternBitmap;
        this.targetSliceIndex = targetIndex;
    }

    @Override
    protected void onDrawSlice(Canvas c, float[] arc, float rotationAngle, float cx, float cy, PieEntry entry, int index, Paint paint) {
        if (index == targetSliceIndex) {
            // 给目标切片设置重复平铺的BitmapShader
            BitmapShader shader = new BitmapShader(patternBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
            paint.setShader(shader);
        } else {
            // 其他切片恢复默认的颜色填充
            paint.setShader(null);
            paint.setColor(mDataSet.getColor(index));
        }
        // 调用父类方法完成切片绘制
        super.onDrawSlice(c, arc, rotationAngle, cx, cy, entry, index, paint);
    }
}

步骤3:将自定义Renderer应用到PieChart

在你设置好饼图数据之后,替换默认的Renderer:

// 初始化饼图(省略数据设置的代码,假设你已经完成PieData的配置)
PieChart pieChart = findViewById(R.id.step_pie_chart);

// 创建点状图案Bitmap
Bitmap dotPattern = createDotPatternBitmap();
// 指定要应用图案的切片索引(比如第0个切片,对应完成目标的部分)
int targetIndex = 0;

// 实例化自定义Renderer并设置给饼图
PatternPieRenderer customRenderer = new PatternPieRenderer(
        pieChart,
        pieChart,
        pieChart.getAnimator(),
        pieChart.getViewPortHandler(),
        dotPattern,
        targetIndex
);
pieChart.setRenderer(customRenderer);

// 刷新图表
pieChart.invalidate();

注意事项

  • 调整Bitmap的大小可以控制图案的密度:Bitmap越小,图案重复越密集;反之则越稀疏。
  • 如果你的饼图有选中高亮的需求,需要在自定义Renderer中额外处理选中状态下的Shader设置,避免高亮时图案失效。
  • 确保在设置完PieData之后再替换Renderer,否则可能出现数据未初始化的问题。

内容的提问来源于stack exchange,提问作者Yaliang Chuang

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 10:12:40