在LineChart上显示图像而不是圆圈 [英] Show image instead of circle on LineChart

问题描述

我已经使用库MPAndroidChart创建了LineChart，并且一切正常.

I have created a LineChart using the library MPAndroidChart and everything works great.

现在我要做的是为图表上的每个条目显示一个可绘制的(图像)而不是默认的圆.

Now what I want to do is show a drawable (image) instead of the default circle for every entry on the chart.

我尝试了API中的很多选项，但是没有运气.

I have tried so many options from the API but no luck.

谁能告诉我该怎么做?

推荐答案

最后，在尝试了很多事情之后，借助@David Rawson的建议和这篇文章

And finally after trying so many things, with the help of @David Rawson's suggestion and this post MPAndroidChart LineChart custom highlight drawable

我设法创建了一个自定义渲染器，该渲染器将图表中的默认圆形图像替换为提供的图像.

I have managed to create a custom renderer, which replaces the default circle image in chart with the provided image.

以下是解决方案的代码段.

Following is the code snippet of solution.

class ImageLineChartRenderer extends LineChartRenderer {
private final LineChart lineChart;
private final Bitmap image;


ImageLineChartRenderer(LineChart chart, ChartAnimator animator, ViewPortHandler viewPortHandler, Bitmap image) {
    super(chart, animator, viewPortHandler);
    this.lineChart = chart;
    this.image = image;
}

private float[] mCirclesBuffer = new float[2];

@Override
protected void drawCircles(Canvas c) {
    mRenderPaint.setStyle(Paint.Style.FILL);
    float phaseY = mAnimator.getPhaseY();
    mCirclesBuffer[0] = 0;
    mCirclesBuffer[1] = 0;
    List<ILineDataSet> dataSets = mChart.getLineData().getDataSets();

    //Draw bitmap image for every data set with size as radius * 10, and store it in scaled bitmaps array
    Bitmap[] scaledBitmaps = new Bitmap[dataSets.size()];
    float[] scaledBitmapOffsets = new float[dataSets.size()];
    for (int i = 0; i < dataSets.size(); i++) {
        float imageSize = dataSets.get(i).getCircleRadius() * 10;
        scaledBitmapOffsets[i] = imageSize / 2f;
        scaledBitmaps[i] = scaleImage((int) imageSize);
    }

    for (int i = 0; i < dataSets.size(); i++) {
        ILineDataSet dataSet = dataSets.get(i);

        if (!dataSet.isVisible() || !dataSet.isDrawCirclesEnabled() || dataSet.getEntryCount() == 0)
            continue;

        mCirclePaintInner.setColor(dataSet.getCircleHoleColor());
        Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());
        mXBounds.set(mChart, dataSet);


        int boundsRangeCount = mXBounds.range + mXBounds.min;
        for (int j = mXBounds.min; j <= boundsRangeCount; j++) {
            Entry e = dataSet.getEntryForIndex(j);
            if (e == null) break;
            mCirclesBuffer[0] = e.getX();
            mCirclesBuffer[1] = e.getY() * phaseY;
            trans.pointValuesToPixel(mCirclesBuffer);
            if (!mViewPortHandler.isInBoundsRight(mCirclesBuffer[0]))
                break;
            if (!mViewPortHandler.isInBoundsLeft(mCirclesBuffer[0]) || !mViewPortHandler.isInBoundsY(mCirclesBuffer[1]))
                continue;

            if (scaledBitmaps[i] != null) {
                c.drawBitmap(scaledBitmaps[i],
                        mCirclesBuffer[0] - scaledBitmapOffsets[i],
                        mCirclesBuffer[1] - scaledBitmapOffsets[i],
                        mRenderPaint);
            }
        }
    }

}


private Bitmap scaleImage(int radius) {
    return Bitmap.createScaledBitmap(image, radius, radius, false);
}

希望这对某人有帮助.

这篇关于在LineChart上显示图像而不是圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！