MPAndroidChart LineChart自定義高亮可繪製

Question

我正在使用MPAndroid圖表庫在我的Android應用程序中繪製折線圖。圖中的狀態是這樣的：

我想改變這樣的：

所以我想改變MPAnroid折線圖的點，TS稱爲「圓孔」在庫中。我想切換這個洞來繪製。有一種方法可以做到這一點？

的圓孔改變代碼是在這裏：

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

庫引用是在這裏：MPAndroidChart

Answer 1

自從3.0版本，你可以提供將在上選擇一個給定的點來顯示自己的自定義圖像圖表。下面的說明是按照the wiki

總之，你現在可以使用名爲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)); 

說明：drawExtras在LineChartRenderer繪製圓。我們仍然想要這些，所以在我們的drawExtras覆蓋，我們稱之爲超級第一。然後我們爲每個DataSet生成縮放的位圖（DataSet可能有不同的圓半徑）。我們將位圖縮放到任意大小（圓圈半徑的10倍）。然後，我們遍歷通過渲染器的LineChart字段暴露的Highlights，並繪製相應的位圖。

下面是截圖 - 你可以看到「明星」圖而不是圓上突出顯示指數：