如何在android中的饼图上动态显示文本?

时间:2012-03-06 10:42:06

标签: android charts pie-chart

我在android中使用过饼图。我从http://tutorials-android.blogspot.in/2011/05/how-create-pie-chart-in-android.html找到了一个优秀解决方案并开展了相关工作。我能够显示带有颜色的饼图,但在我的应用程序中除了颜色之外,我还需要在该饼图上动态显示文本。 如何在这些饼图切片上动态显示文字?

请帮助我......感谢...

4 个答案:

答案 0 :(得分:1)

要绘制饼图,你已经使用了很长的过程.....希望这有助于你..

public class Demo extends Activity {
    /** Called when the activity is first created. */
    float values[]={500,400,300,200,100};
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    LinearLayout linear=(LinearLayout) findViewById(R.id.linear);
    values=calculateData(values);
    linear.addView(new MyGraphview(this,values));

}
private float[] calculateData(float[] data) {
    // TODO Auto-generated method stub
    float total=0;
    for(int i=0;i<data.length;i++)
    {
        total+=data[i];
    }
    for(int i=0;i<data.length;i++)
    {
    data[i]=360*(data[i]/total);            
    }
    return data;

}
public class MyGraphview extends View
{
    private Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);
    private float[] value_degree;
    private int[] COLORS={Color.BLUE,Color.GREEN,Color.GRAY,Color.CYAN,Color.RED};
    RectF rectf = new RectF (10, 10, 200, 200);
    int temp=0;
    public MyGraphview(Context context, float[] values) {

        super(context);
        value_degree=new float[values.length];
        for(int i=0;i<values.length;i++)
        {
            value_degree[i]=values[i];
        }
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);

        for (int i = 0; i < value_degree.length; i++) {//values2.length; i++) {
            if (i == 0) {
                paint.setColor(COLORS[i]);
                canvas.drawArc(rectf, 0, value_degree[i], true, paint);
            } 
            else
            {
                    temp += (int) value_degree[i - 1];
                    paint.setColor(COLORS[i]);
                    canvas.drawArc(rectf, temp, value_degree[i], true, paint);
            }
        }
    }

}

}

根据降序排列的值设置颜色... 对于文本,您可以单独设置动态文本,并在文本前面添加颜色方块:)

答案 1 :(得分:1)

要在每个饼图段的中心绘制文本,您需要计算每个段的中心。要在该段上绘制的每个文本项的中心应与该中心点对齐 - 这是通过从中心x坐标减去文本边界宽度的一半(或使用paint.setTextAlign(Align.CENTER);)和文本的一半来实现的。中心y坐标的高度。

至于找到一个片段的中心,它需要比使用简单几何学更多的考虑。

段的中心坐标可以通过以下方式找到:

x = (/* radius of pie chart */ /2)*cos(/*angle in RADIANS */) [angle in radians = Math.toRadians(/*half the sweep angle in degrees*/)

y = (/* radius of pie chart */ /2)*sin(/*angle in RADIANS */)

差不多......不要忘记将饼图中心的x和y坐标添加到上面的x和y值,否则你试图在以(0,0)为中心的圆上绘画你的自定义视图!

假设您的饼图位于视图的实际中心,您想要添加:

x += getWidth()/2; y += getHeight()/2;

最后但并非最不重要的是,考虑要绘制的文本的长度 - 使用例如:

来获取文本的边界

Paint paint = new Paint(); paint.setColor(Color.WHITE); paint.setTextAlign(Align.CENTER); // This centres the text horizontally

String labelText = "TEST"; Rect textBounds = new Rect(); paint.getTextBounds(labelText, 0, labelText.length(), textBounds);

y -= textBounds.height()/2;

然后您的文字应该正确显示。

答案 2 :(得分:1)

您可以使用名为MPAndroidChart的库,它非常简单易用。只需导入此

 compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'

并在您的gradle文件中添加此行

allprojects {
repositories {
    maven { url "https://jitpack.io" }
}
}

希望这会对你有所帮助。

答案 3 :(得分:0)

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (mState != IS_READY_TO_DRAW) {
   return;
  }
  canvas.drawColor(mBgcolor);
  mBagpaints.setAntiAlias(true);
  mBagpaints.setStyle(Paint.Style.FILL);
  mBagpaints.setColor(0x88FF0000);
  mBagpaints.setStrokeWidth(0.0f);
  mLinePaints.setAntiAlias(true);
  mLinePaints.setColor(0xff000000);
  mLinePaints.setStrokeWidth(3.0f);
  mLinePaints.setStyle(Paint.Style.STROKE);
  RectF mOvals = new RectF(mGapleft, mGapTop, mWidth - mGapright, mHeight
    - mGapBottm);
  mStart = START_INC;
  PieDetailsItem item;
  for (int i = 0; i < mdataArray.size(); i++) {
   item = (PieDetailsItem) mdataArray.get(i);
   mBagpaints.setColor(item.color);
   mSweep = (float) 360* ((float) item.count / (float) mMaxConnection);
   canvas.drawArc(mOvals, mStart, mSweep, true, mBagpaints);
   canvas.drawArc(mOvals, mStart, mSweep, true, mLinePaints);
   mStart = mStart + mSweep;


  // set your text here
  canvas.drawText("here is some text", mStart, someYvalue, mLinePaints);
  }

  mState = IS_DRAW;
 }

只是一些drawText()调用应该可以正常工作。 你必须做一些数学计算才能确定y坐标的位置