MPAndroidChart LineChart自定義高亮顯示drawable

Question

我正在使用MPAndroid Chart庫在我的Android應用程序中繪制折線圖。 圖的狀態如下：

我想改變它：

所以我想改變MPAnroid Line Chart的點，在圖書館中稱為“圓孔”。 我想把這個洞換成可畫的。 我有辦法做到這一點嗎？

圓孔更改代碼在這里：

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

庫參考在這里： MPAndroidChart

Answer 1

從版本3.0開始，您可以提供自己的自定義圖像，該圖像將在選擇圖表上的給定點時顯示。 以下說明是根據維基

總而言之，您現在可以使用名為MarkerImage的類：

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

然后：

myChart.setMarker(myMarkerImage);

要調整圖像的位置，您可以調用：

setOffset(float x, float y);

如果您不想使用MarkerView ，您可能必須創建自己的LineChartRenderer子類並添加邏輯來繪制自定義高亮顯示。

這是一個非常基本的概念證明：

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。 然后我們為每個DataSet生成一個縮放的位圖（DataSet可能有不同的圓半徑）。 我們將位圖縮放到任意大小（圓半徑的10倍）。 然后，我們遍歷通過渲染器的LineChart字段公開的高光，並繪制相應的位圖。

這是一個截圖 - 您可以在突出顯示的索引上看到'star'位圖而不是圓圈：