MPAndroidChart LineChart自定义突出显示可绘制 [英] MPAndroidChart LineChart custom highlight drawable

问题描述

我正在使用MPAndroid图表库在我的Android应用中绘制折线图.图的状态如下:

I'm using MPAndroid Chart library to draw Line Chart in my Android app. The status of graph is like:

我想这样更改它:

因此，我想更改MPAnroid折线图的点，ts在库中称为"Circle Hole".我想将此孔切换为可绘制.有办法可以做到吗?

So I want to change MPAnroid Line Chart's points, ts called "Circle Hole" in library. I want to switch this hole to drawable. There is a way I can do that?

圆形孔更改代码在这里:

The circle hole change code is here:

LineDataSet set1 = new LineDataSet(yVals, "DataSet 1");
set1.setDrawCircleHole( true );
set1.setCircleColor( Color.BLACK );

图书馆参考资料在这里: MPAndroidChart

Library reference is here: MPAndroidChart

推荐答案

从3.0版开始，您可以提供自己的自定义图像，该图像将在选择图表上的给定点时显示.以下说明根据 Wiki

Since version 3.0 you can provide your own custom image that will be displayed on selecting a given point on the chart. The instructions below are as per the wiki

总结一下，您现在可以使用名为MarkerImage的类:

To summarise, you can now use the class called MarkerImage:

MarkerImage myMarkerImage = new MarkerImage(this, R.drawable.my_drawable);

然后:

myChart.setMarker(myMarkerImage);

要调整图像的位置，您可以调用:

To adjust the position of the image, you can call:

setOffset(float x, float y);

如果您不想使用MarkerView，则可能必须制作自己的

If you don't want to use MarkerView, you would probably have to make your own sub-class of LineChartRenderer and add logic to draw your custom highlight drawable.

这是一个非常基本的概念证明:

Here is a very basic proof of concept:

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

import com.github.mikephil.charting.animation.ChartAnimator;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;
import com.github.mikephil.charting.renderer.LineChartRenderer;
import com.github.mikephil.charting.utils.Transformer;
import com.github.mikephil.charting.utils.ViewPortHandler;

import java.util.List;

/**
 * Created by David on 3/01/2017.
 */

public class ImageLineChartRenderer extends LineChartRenderer {

    private final LineChart lineChart;
    private final Bitmap image;

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

    @Override
    public void drawExtras(Canvas c) {
        super.drawExtras(c);

        Highlight[] highlighted = lineChart.getHighlighted();
        if (highlighted == null) return;

        float phaseY = mAnimator.getPhaseY();

        float[] imageBuffer = new float[2];
        imageBuffer[0] = 0;
        imageBuffer[1] = 0;
        LineData lineData = mChart.getLineData();
        List<ILineDataSet> dataSets = mChart.getLineData().getDataSets();

        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 (Highlight high : highlighted) {
            int dataSetIndex = high.getDataSetIndex();
            ILineDataSet set = lineData.getDataSetByIndex(dataSetIndex);
            Transformer trans = lineChart.getTransformer(set.getAxisDependency());

            if (set == null || !set.isHighlightEnabled())
                continue;

            Entry e = set.getEntryForXValue(high.getX(), high.getY());

            if (!isInBoundsX(e, set))
                continue;

            imageBuffer[0] = e.getX();
            imageBuffer[1] = e.getY() * phaseY;
            trans.pointValuesToPixel(imageBuffer);

            c.drawBitmap(scaledBitmaps[dataSetIndex],
                    imageBuffer[0] - scaledBitmapOffsets[dataSetIndex],
                    imageBuffer[1] - scaledBitmapOffsets[dataSetIndex],
                    mRenderPaint);
        }
    }

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

像这样食用:

Bitmap starBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.star);
mChart.setRenderer(new ImageLineChartRenderer(mChart, mChart.getAnimator(), mChart.getViewPortHandler(), starBitmap));

说明:LineChartRenderer中的drawExtras绘制圆圈.我们仍然需要这些，因此在我们的drawExtras覆盖中，我们首先调用super.然后，我们为每个数据集生成一个缩放的位图(数据集可能具有不同的圆半径).我们将位图缩放到任意大小(圆半径的10倍).然后，我们对渲染器的LineChart字段公开的Highlights进行迭代，并绘制适当的位图.

Explanation: drawExtras in LineChartRenderer draws the circles. We still want these, so in our drawExtras override we call super first. Then we generate a scaled bitmap for each DataSet (DataSets may have different circle radii). We scale the bitmaps to an arbitrary size (10x the circle radius). We then iterate through the Highlights exposed through the LineChart field of our renderer and draw the appropriate bitmap.

这是一个屏幕截图-您可以看到星形"位图，而不是突出显示的索引上的圆圈:

Here is a screenshot - you can see the 'star' bitmap instead of the circle on the highlighted index:

这篇关于MPAndroidChart LineChart自定义突出显示可绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！