Android图表库XCL-Charts
阅读原文时间:2023年07月17日阅读:2

首先,这个是国人开发的,支持下必须顶!github项目地址:点击打开,由于项目的基本功能已经实现,所以项目作者也说以后基本不会在有更新了。

项目简介:

Android图表库(XCL-Charts is a free charting library for Android platform.),基于Android Canvas来绘制各种图表,使用简便,定制灵活。目前支持3D/非3D/背向式/横向/竖向柱形图(Bar Chart)、3D/非3D饼图(Pie Chart)、堆叠图(Stacked Bar Chart)、面积图(Area Chart)、 折线图(Line Chart)、曲线图(Spline Chart)、环形图(Dount Chart)、南丁格尔玫瑰图(Rose Chart)、仪表盘(Dial Chart)、刻度盘(Gauge Chart)、雷达图(Radar Chart)、漏斗图(Funnel Chart)、圆形图(Circle Chart)等。该项目作者的CSDN博客地址:点击打开

其它特性还包括手势缩放、图表滑动、点击交互、多图叠加、图表批注、动画效果、多XY轴显示、轴线任意方位显示、动态图例、图表参考线、柱图刻度对齐风格切换、混合图表及同数据源图表类型切换等。

效果图:我在这里只放一些,其他的效果你可以参考项目地址,我首先试用了一下仪表盘动画

不足的地方:作者没有一般的使用方法,在他的博客厘米爱你只是简单介绍了一些方法的说明,可能是我水平不够,或者是看的老外的github项目多的原因,不过在这里我还是图草下(擦,google拼音连个吐槽都不能识别了吗);下面说的一般使用方法,参考了作者的demo

先建一个封装类DialChart02View.java,(里面的用法不懂的可以参考作者的博客)

package com.example.dashchart;

import java.util.ArrayList;
import java.util.List;

import org.xclcharts.chart.DialChart;
import org.xclcharts.common.MathHelper;
import org.xclcharts.renderer.XEnum;
import org.xclcharts.renderer.plot.PlotAttrInfo;
import org.xclcharts.view.GraphicalView;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.util.AttributeSet;
import android.util.Log;

public class DialChart02View extends GraphicalView {

 private String TAG = "DialChart02View";  
 private DialChart chart = new DialChart();  
 private float mPercentage = 0.9f;

 public DialChart02View(Context context) {  
     super(context);  
     // TODO Auto-generated constructor stub  
     initView();  
 }

 public DialChart02View(Context context, AttributeSet attrs){  
     super(context, attrs);  
     initView();  
  }

  public DialChart02View(Context context, AttributeSet attrs, int defStyle) {  
         super(context, attrs, defStyle);  
         initView();  
  }

  private void initView()  
  {  
     chartRender();  
  }

  @Override  
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
         super.onSizeChanged(w, h, oldw, oldh);  
         chart.setChartRange(w ,h );  
     }          

     public void chartRender()  
     {  
         try {                                

             //设置标题背景  
             chart.setApplyBackgroundColor(true);  
             chart.setBackgroundColor( Color.rgb(47, 199, 140) );  
             //绘制边框  
             chart.showRoundBorder();

             //设置当前百分比  
             //chart.setCurrentPercentage(mPercentage);

             //设置指针长度  
             chart.getPointer().setLength(0.68f);

             //增加轴  
             addAxis();  
             /////////////////////////////////////////////////////////////  
             //设置附加信息  
             addAttrInfo();  
             /////////////////////////////////////////////////////////////

             chart.getPointer().setPercentage(mPercentage);

             chart.getPointer().getPointerPaint().setColor(Color.WHITE);  
             chart.getPointer().getBaseCirclePaint().setColor(Color.WHITE);  
             //chart.getPointer().setPointerStyle(XEnum.PointerStyle.TRIANGLE);

             chart.getPointer().setPercentage(mPercentage/2);

         } catch (Exception e) {  
             // TODO Auto-generated catch block  
             Log.e(TAG, e.toString());  
         }

     }

     public void addAxis()  
     {  
         //开始设置轴  
         //轴1 --最外面的弧线轴  
         chart.addArcLineAxis(1);            

         //轴3 --环形颜色轴  
         List<Float> ringPercentage = new ArrayList<Float>();  
         float rper = MathHelper.getInstance().sub(1,mPercentage);  
         ringPercentage.add( mPercentage);  
         ringPercentage.add( rper);

         List<Integer> rcolor  = new ArrayList<Integer>();  
         rcolor.add(Color.rgb(222, 248, 239));  
         rcolor.add(Color.rgb(99, 214, 173));  
         chart.addStrokeRingAxis(0.8f,0.7f, ringPercentage, rcolor);

         chart.addLineAxis(XEnum.Location.TOP,0.3f);  
         chart.addLineAxis(XEnum.Location.LEFT,0.3f);  
         chart.addLineAxis(XEnum.Location.RIGHT,0.3f);  
         if(chart.getPlotAxis().size() >= 2)  
         {  
             chart.getPlotAxis().get(2).getAxisPaint().setColor(Color.BLUE);  
             chart.getPlotAxis().get(2).getAxisPaint().setStrokeWidth(5);  
         }  
         if(chart.getPlotAxis().size() >= 3)  
         {  
             chart.getPlotAxis().get(3).getAxisPaint().setColor(Color.GREEN);  
             chart.getPlotAxis().get(3).getAxisPaint().setStrokeWidth(5);  
         }  
         if(chart.getPlotAxis().size() >= 4)  
         {  
             chart.getPlotAxis().get(4).getAxisPaint().setColor(Color.YELLOW);  
             chart.getPlotAxis().get(4).getAxisPaint().setStrokeWidth(5);  
         }

         chart.getPlotAxis().get(0).getAxisPaint().setColor(Color.WHITE );  
         chart.getPlotAxis().get(0).getAxisPaint().setStrokeWidth(2);  
         chart.getPlotAxis().get(1).getFillAxisPaint().setColor(Color.rgb(47, 199, 140) );

         chart.addCircleAxis(0.2f,Color.rgb(62, 175, 135));  
         chart.addCircleAxis(0.15f,Color.rgb(28, 111, 84));  
     }

     private void addAttrInfo()  
     {  
         /////////////////////////////////////////////////////////////  
         PlotAttrInfo plotAttrInfo = chart.getPlotAttrInfo();

         //设置附加信息  
         Paint paintTB = new Paint();  
         paintTB.setColor(Color.WHITE);  
         paintTB.setTextAlign(Align.CENTER);  
         paintTB.setTextSize(30);  
         plotAttrInfo.addAttributeInfo( XEnum.Location.TOP, "100 K/s", 0.9f, paintTB);

         Paint paintBT = new Paint();  
         paintBT.setColor(Color.WHITE);  
         paintBT.setTextAlign(Align.CENTER);  
         paintBT.setTextSize(30);

         plotAttrInfo.addAttributeInfo(XEnum.Location.BOTTOM,  
                 "当前PH值: "+Float.toString( mPercentage \* 100)+"K/s", 0.8f, paintBT);  
     }

     public void setCurrentStatus(float percentage)  
     {  
         //清理  
         chart.clearAll();

         mPercentage =  percentage;  
         //设置当前百分比  
         chart.getPointer().setPercentage(mPercentage);  
         addAxis();  
         addAttrInfo();  
     }

     @Override  
     public void render(Canvas canvas) {  
         // TODO Auto-generated method stub  
          try{  
                 chart.render(canvas);

             } catch (Exception e){  
                 Log.e(TAG, e.toString());  
             }  
     }  

}

其次就是在主activity.java中调用了,首先在布局文件中自定义标签

<com.example.dashchart.DialChart02View  
    android:id="@+id/circle\_view"  
    android:layout\_width="fill\_parent"  
    android:layout\_height="250dip" />

话说这个标签好奇特,需要和自定义的类做标签,我也是醉了,下面就是MainActivity.java标签了

package com.example.dashchart;

import java.util.Random;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import com.example.dashchart.DialChart02View;

public class MainActivity extends Activity {
DialChart02View chart = null;
Button button;

@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity\_main);  
    chart = (DialChart02View) findViewById(R.id.circle\_view);  
    button = (Button) findViewById(R.id.button1);  
    button.setOnClickListener(new OnClickListener() {

        @Override  
        public void onClick(View arg0) {  
            // TODO Auto-generated method stub  
            int max = 100;  
            int min = 1;  
            Random random = new Random();  
            int p = random.nextInt(max) % (max - min + 1) + min;  
            float pf = p / 100f;  
            chart.setCurrentStatus(pf);  
            chart.invalidate();

        }  
    });  
}

@Override  
public boolean onCreateOptionsMenu(Menu menu) {  
    // Inflate the menu; this adds items to the action bar if it is present.  
    getMenuInflater().inflate(R.menu.main, menu);  
    return true;  
}

@Override  
public boolean onOptionsItemSelected(MenuItem item) {  
    // Handle action bar item clicks here. The action bar will  
    // automatically handle clicks on the Home/Up button, so long  
    // as you specify a parent activity in AndroidManifest.xml.  
    int id = item.getItemId();  
    if (id == R.id.action\_settings) {  
        return true;  
    }  
    return super.onOptionsItemSelected(item);  
}  

}

效果图:改天在放吧,其实差不多,区别就是根据你的需要修改一些自定义的东西,有时间在好好研究下作者的代码,最后还是特别感谢项目作者的开源精神,在这里也是帮作者宣传下!

2015-05-02 08:08:05

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章