MPAndroidChart：在每个栏上添加不同的图像

Question

我正在使用MPAndroidChart，需要实现BarChart 来显示用户分数和用户个人资料图片。

谁能帮我定制BarChart？

谢谢

Answer 1

我通过使用自定义 BarChartRenderer 解决了我的问题。

下面是自定义BarRenderer的源码：

import android.graphics.Bitmap;
import android.graphics.Canvas;

import com.github.mikephil.charting.animation.ChartAnimator;
import com.github.mikephil.charting.buffer.BarBuffer;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.interfaces.dataprovider.BarDataProvider;
import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;
import com.github.mikephil.charting.renderer.BarChartRenderer;
import com.github.mikephil.charting.utils.ViewPortHandler;

/**
 * Created by hemantchhonkar on 21-02-2018.
 */

public class BarChartImageRenderer extends BarChartRenderer {
    private final Bitmap[] imageToRender;
    public BarChartImageRenderer(BarDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler, Bitmap[] imageToRender) {
        super(chart, animator, viewPortHandler);
        this.imageToRender=imageToRender;
    }

    @Override
    protected void drawDataSet(Canvas c, IBarDataSet dataSet, int index) {
        super.drawDataSet(c, dataSet, index);
         drawBarImages(c, dataSet, index);

    }
    protected void drawBarImages(Canvas c, IBarDataSet dataSet, int index) {
        BarBuffer buffer = mBarBuffers[index];

        float left; //avoid allocation inside loop
        float right;
        float top;
        float bottom;


        for (int j = 0; j < buffer.buffer.length * mAnimator.getPhaseX(); j += 4) {
            left = buffer.buffer[j];
            right = buffer.buffer[j + 2];
            top = buffer.buffer[j + 1];
            bottom = buffer.buffer[j + 3];

            float x = (left + right) / 2f;

            if (!mViewPortHandler.isInBoundsRight(x))
                break;

            if (!mViewPortHandler.isInBoundsY(top)
                    || !mViewPortHandler.isInBoundsLeft(x))
                continue;

            BarEntry entry = dataSet.getEntryForIndex(j / 4);
            float val = entry.getY();
            final Bitmap scaledBarImage = scaleBarImage(buffer,imageToRender[j / 4]);

            int starWidth = scaledBarImage.getWidth();
            int starOffset = starWidth / 2;

            drawImage(c, scaledBarImage, x - starOffset, top);
        }
    }

    private Bitmap scaleBarImage(BarBuffer buffer, Bitmap image) {
        float firstLeft = buffer.buffer[0];
        float firstRight = buffer.buffer[2];
        int firstWidth = (int) Math.ceil(firstRight - firstLeft);
        return Bitmap.createScaledBitmap(image, firstWidth, firstWidth, false);
    }
    protected void drawImage(Canvas c, Bitmap image, float x, float y) {
        if (image != null) {
            c.drawBitmap(image, x, y, null);
        }
    }

}

然后将渲染器设置到您的活动/片段中的图表中：

//Create and array of images(this array size should match the size of dataset)    
Bitmap[] starBitmap = new Bitmap[]{ BitmapFactory.decodeResource(getResources(), R.drawable.my_dp),
                BitmapFactory.decodeResource(getResources(), R.drawable.profile_pic),
                BitmapFactory.decodeResource(getResources(), R.drawable.my_dp),
                BitmapFactory.decodeResource(getResources(), R.drawable.profile_pic),
                BitmapFactory.decodeResource(getResources(), R.drawable.my_dp),
                BitmapFactory.decodeResource(getResources(), R.drawable.profile_pic),
                BitmapFactory.decodeResource(getResources(), R.drawable.my_dp),
                BitmapFactory.decodeResource(getResources(), R.drawable.profile_pic),
                BitmapFactory.decodeResource(getResources(), R.drawable.my_dp),
                BitmapFactory.decodeResource(getResources(), R.drawable.my_dp)};
//Create the object of the chart renderer and set into the chart
barChart2.setRenderer(new BarChartImageRenderer(barChart2, barChart2.getAnimator(), barChart2.getViewPortHandler(), starBitmap));

Screenshot of the rendered chart