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，并绘制相应的位图。

下面是截图 - 你可以看到“明星”图而不是圆上突出显示指数：