MPAndroidChart: सलाखों के अंदर कस्टम छवि को जोड़ने

Question

मैं MPAndroidChart उपयोग कर रहा हूँ और मैं नीचे छवि में इस तरह CombinedChart अंदर एक कस्टम drawable दिखाना चाहते हैं:

तो बार मूल्य है> = लक्ष्य मान का कहना है कि , 50, फिर मैं बार के अंदर एक स्टार छवि जोड़ना चाहता हूं।

क्या कोई भी बारचर्ट को अनुकूलित करने में मेरी सहायता कर सकता है?

Answer 1

हमारे सलाखों के अंदर स्टार छवि प्राप्त करने के लिए, हमें एक कस्टम रेंडरर बनाने की आवश्यकता होगी। क्योंकि हमारे बार चार्ट BarChartRenderer का उपयोग करता है कि हम इस पहले उपवर्ग और हमारी छवि के लिए एक पैरामीटर जोड़ देगा:

public class ImageBarChartRenderer extends BarChartRenderer { 

    private final Bitmap barImage; 

    public ImageBarChartRenderer(BarDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler, Bitmap barImage) { 
     super(chart, animator, viewPortHandler); 
     this.barImage = barImage; 
    } 

हम BarChartRenderer के लिए स्रोत का निरीक्षण यदि हम यह विधि कहा जाता है कहता है कि देख सकते हैं drawData और उसके बाद प्रत्येक डेटासेट के माध्यम से दोहराता और कॉल drawDataSet। drawDataSet वह जगह है जहां कार्रवाई हो रही है: यह छाया और बार खींच रहा है। अब हम एक विधि है कि डेटासेट के माध्यम से पुनरावृति और स्टार आकर्षित करेगा की जरूरत है

@Override 
    protected void drawDataSet(Canvas c, IBarDataSet dataSet, int index) { 
     super.drawDataSet(c, dataSet, index); 
     drawBarImages(c, dataSet, index); 
    } 

: यह छवियों की तरह एक अतिरिक्त आकर्षित करने के लिए तर्क जोड़ने, इसलिए आइए वहीं हमारे छवियों आकर्षित करने के लिए एक विधि के लिए एक कॉल जोड़ने के लिए एक उपयुक्त जगह है इमेजिस। टेम्पलेट के रूप में कार्य करने वाली एक उपयुक्त विधि drawValues है तो चलिए इसे कॉपी करें और इसे बदलें ताकि पाठ की बजाय छवि खींची जा सके। यह समझने की कुंजी यह देख रही है कि बारबफर कैसे काम करता है। बारबफर में j, j + 1, j + 2, j + 3 पर दिए गए एंट्री के लिए बार के लिए ऑन-स्क्रीन (पिक्सेल) समन्वय होता है।

स्पष्टीकरण के लिए, j बाएं एक्स समन्वय है, j + 1 शीर्ष वाई समन्वय है और इसलिए j + 3 पर दाएं एक्स समन्वय के माध्यम से है।

protected void drawBarImages(Canvas c, IBarDataSet dataSet, int index) { 
     BarBuffer buffer = mBarBuffers[index]; 

     float left; //avoid allocation inside loop 
     float right; 
     float top; 
     float bottom; 

     for (int j = 0; j < buffer.buffer.length * mAnimator.getPhaseX(); j += 4) { 
      left = buffer.buffer[j]; 
      right = buffer.buffer[j + 2]; 
      top = buffer.buffer[j + 1]; 
      bottom = buffer.buffer[j + 3]; 

      float x = (left + right)/2f; 

      if (!mViewPortHandler.isInBoundsRight(x)) 
       break; 

      if (!mViewPortHandler.isInBoundsY(top) 
        || !mViewPortHandler.isInBoundsLeft(x)) 
       continue; 

      BarEntry entry = dataSet.getEntryForIndex(j/4); 
      float val = entry.getY(); 

      if (val > 50) { 
       drawStar(c, barImage, x, top); 
      } 
     } 
    } 

यहाँ कैसे रेंडरर का उपभोग करने के लिए:: हम यह समझने में अधिक आसान बनाने के लिए चर करने के लिए इन निकाल पाएंगे

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

रेंडरर के लिए अंतिम कदम बिटमैप पैमाने पर करने के तर्क को जोड़ने के लिए है और इसे सही ढंग से स्थिति दें। यहाँ अंतिम कस्टम रेंडरर का सबूत के-अवधारणा है:

package com.xxmassdeveloper.mpchartexample; 

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

import com.github.mikephil.charting.animation.ChartAnimator; 
import com.github.mikephil.charting.buffer.BarBuffer; 
import com.github.mikephil.charting.data.BarEntry; 
import com.github.mikephil.charting.interfaces.dataprovider.BarDataProvider; 
import com.github.mikephil.charting.interfaces.datasets.IBarDataSet; 
import com.github.mikephil.charting.renderer.BarChartRenderer; 
import com.github.mikephil.charting.utils.ViewPortHandler; 

/** 
* Created by David on 29/12/2016. 
*/ 

public class ImageBarChartRenderer extends BarChartRenderer { 

    private final Bitmap barImage; 

    public ImageBarChartRenderer(BarDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler, Bitmap barImage) { 
     super(chart, animator, viewPortHandler); 
     this.barImage = barImage; 
    } 

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

    @Override 
    protected void drawDataSet(Canvas c, IBarDataSet dataSet, int index) { 
     super.drawDataSet(c, dataSet, index); 
     drawBarImages(c, dataSet, index); 
    } 

    protected void drawBarImages(Canvas c, IBarDataSet dataSet, int index) { 
     BarBuffer buffer = mBarBuffers[index]; 

     float left; //avoid allocation inside loop 
     float right; 
     float top; 
     float bottom; 

     final Bitmap scaledBarImage = scaleBarImage(buffer); 

     int starWidth = scaledBarImage.getWidth(); 
     int starOffset = starWidth/2; 

     for (int j = 0; j < buffer.buffer.length * mAnimator.getPhaseX(); j += 4) { 
      left = buffer.buffer[j]; 
      right = buffer.buffer[j + 2]; 
      top = buffer.buffer[j + 1]; 
      bottom = buffer.buffer[j + 3]; 

      float x = (left + right)/2f; 

      if (!mViewPortHandler.isInBoundsRight(x)) 
       break; 

      if (!mViewPortHandler.isInBoundsY(top) 
        || !mViewPortHandler.isInBoundsLeft(x)) 
       continue; 

      BarEntry entry = dataSet.getEntryForIndex(j/4); 
      float val = entry.getY(); 

      if (val > 50) { 
       drawImage(c, scaledBarImage, x - starOffset, top); 
      } 
     } 
    } 

    private Bitmap scaleBarImage(BarBuffer buffer) { 
     float firstLeft = buffer.buffer[0]; 
     float firstRight = buffer.buffer[2]; 
     int firstWidth = (int) Math.ceil(firstRight - firstLeft); 
     return Bitmap.createScaledBitmap(barImage, firstWidth, firstWidth, false); 
    } 

    protected void drawImage(Canvas c, Bitmap image, float x, float y) { 
     if (image != null) { 
      c.drawBitmap(image, x, y, null); 
     } 
    } 
} 

यहाँ एक स्क्रीन शॉट है - आप देख सकते हैं कि 50 से अधिक मूल्यों तारा होता है: