Android图表引擎AChartEngine之折线图使用

最近在帮老师做一个课题，其中app端需要显示折线图以便直观地看数据波动，上网查了些资料后发现了这款图标引擎，另外感谢李坤老师的博客，帮助很大。

废话不多说，下面写代码。

一.AChartEngine是一款非常强大的绘图引擎，不过我这里只需用到折线图，所以并没有其他图的使用。首先我们要导入achartengine-xxx.jar，我这里使用的是achartengine-0.7.0.jar.

二.工欲善其事，必先利其器。由于在项目中需要使用图表的地方不止一处，我根据自己实际所需情况先封了个工具类。

 package xidian.zhr.utils;

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

 import org.achartengine.ChartFactory;
 import org.achartengine.chart.PointStyle;
 import org.achartengine.model.XYMultipleSeriesDataset;
 import org.achartengine.model.XYSeries;
 import org.achartengine.renderer.XYMultipleSeriesRenderer;
 import org.achartengine.renderer.XYSeriesRenderer;

 import android.content.Context;
 import android.graphics.Color;
 import android.graphics.Paint.Align;
 import android.view.View;
 import android.widget.LinearLayout;

 public class AChartEngineUtil
 {

     /**
      * 获取坐标序列
      * @param size 序列点数
      * @param values  y轴值
      * @return  坐标x轴序列   或   坐标y轴序列
      */
     public static List<double[]> getlist(int size,List<String> values)
     {
         List<double[]> xy = new ArrayList<double[]>();

         double[] list =  new double[size];
         for(int i = 0 ; i < size ;i++)
         {
             list[i] = (values.isEmpty())? i : Double.valueOf(values.get(i));
         }

         xy.add(list);

         return xy;
     }

      /**
        * 构建XYMultipleSeriesRenderer.
        *
        * @param colors 每个序列的颜色
        * @param styles 每个序列点的类型(可设置三角,圆点,菱形,方块等多种)
        *                            ( PointStyle.CIRCLE, PointStyle.DIAMOND,PointStyle.TRIANGLE, PointStyle.SQUARE )
        * @return XYMultipleSeriesRenderer
        */
     public static XYMultipleSeriesRenderer buildRenderer(int[] colors,PointStyle[] styles)
     {
         XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
         // 控制横纵轴的属性字大小
         renderer.setAxisTitleTextSize(15);
         // 控制横纵轴的值大小
         renderer.setChartTitleTextSize(20);
         renderer.setLabelsTextSize(15);
         renderer.setLegendTextSize(15);
         renderer.setPointSize(5f);
         renderer.setMargins(new int[]
         { 20, 30, 15, 0 });
         int length = colors.length;
         for (int i = 0; i < length; i++)
         {
             XYSeriesRenderer r = new XYSeriesRenderer();
             r.setColor(colors[i]);
             r.setPointStyle(styles[i]);
             renderer.addSeriesRenderer(r);
         }
         return renderer;
     }

      /**
        * 设置renderer的一些坐标轴属性.
        *
        * @param renderer 要设置的renderer
        * @param title 图表标题
        * @param xTitle X轴标题
        * @param yTitle Y轴标题
        * @param xMin X轴最小值
        * @param xMax X轴最大值
        * @param yMin Y轴最小值
        * @param yMax Y轴最大值
        * @param axesColor X轴颜色
        * @param labelsColor Y轴颜色
        */
     public static void setChartSettings(XYMultipleSeriesRenderer renderer,
             String title, String xTitle, String yTitle, double xMin,
             double xMax, double yMin, double yMax, int axesColor,
             int labelsColor)
     {
         renderer.setChartTitle(title);
         renderer.setXTitle(xTitle);
         renderer.setYTitle(yTitle);
         renderer.setXAxisMin(xMin);
         renderer.setXAxisMax(xMax);
         renderer.setYAxisMin(yMin);
         renderer.setYAxisMax(yMax);
         renderer.setAxesColor(axesColor);
         renderer.setLabelsColor(labelsColor);
     }

      /**
        * 构建和时间有关的XYMultipleSeriesDataset,这个方法与buildDataset在参数上区别是需要List<Date[]>作参数.
        *
        * @param titles 序列图例
        * @param xValues X轴值
        * @param yValues Y轴值
        * @return XYMultipleSeriesDataset
        */
     public static XYMultipleSeriesDataset buildDataset(String[] titles,
             List<double[]> xValues, List<double[]> yValues)
     {
         XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
         int length = titles.length;
         for (int i = 0; i < length; i++)
         {
             XYSeries series = new XYSeries(titles[i]);
             double[] xV = xValues.get(i);
             double[] yV = yValues.get(i);
             int seriesLength = xV.length;
             for (int k = 0; k < seriesLength; k++)
             {
                 series.add(xV[k], yV[k]);
             }
             dataset.addSeries(series);
         }
         return dataset;
     }

     /**
      * 绘制图表
      * @param context  当前环境
      * @param layout   承载图标的容器
      * @param titles   折线名称
      * @param colors   折线颜色
      * @param data     y轴坐标数据
      * @param xname    x轴名字
      * @param yname    y轴名字
      */
     public static void setchart(Context context,LinearLayout layout,String[] titles,int[] colors,
             List<String> data,String xname,String yname)
     {

         //获取x轴坐标
         List<double[]> x = getlist(data.size(), new ArrayList<String>());
         //获取y轴坐标
         List<double[]> values = getlist(data.size(),data);

         PointStyle[] styles = new PointStyle[] {PointStyle.CIRCLE};
         //构建XYMultipleSeriesRenderer
         XYMultipleSeriesRenderer renderer = buildRenderer(colors, styles);

         setChartSettings(renderer, "", xname, yname, 0.5, 12.5, 0, 30,Color.LTGRAY, Color.LTGRAY);

         int length = renderer.getSeriesRendererCount();//获取点数量
         for (int i = 0; i < length; i++)
         {
               ((XYSeriesRenderer) renderer.getSeriesRendererAt(i)).setFillPoints(true);//设置图上的点为实心
         }
         renderer.setXLabels(12);//设置x轴显示12个点,根据setChartSettings的最大值和最小值自动计算点的间隔
         renderer.setYLabels(10);//设置y轴显示10个点,根据setChartSettings的最大值和最小值自动计算点的间隔
         renderer.setShowGrid(true);//是否显示网格
         renderer.setXLabelsAlign(Align.RIGHT);//刻度线与刻度标注之间的相对位置关系
         renderer.setYLabelsAlign(Align.CENTER);//刻度线与刻度标注之间的相对位置关系
         renderer.setZoomButtonsVisible(true);//是否显示放大缩小按钮
         renderer.setPanLimits(new double[] { -10, 300, -10, 300 }); //设置拖动时X轴Y轴允许的最大值最小值.
         renderer.setZoomLimits(new double[] {  -10, 300, -10, 300 });//设置放大缩小时X轴Y轴允许的最大最小值. 

         //构建view
         View v = ChartFactory.getLineChartView(context,buildDataset(titles, x, values),renderer); 

         layout.addView(v);
     }
 }

三.下面是我的界面代码，由于这课题并不在乎界面，我这里也就简陋了点

 <?xml version="1.0" encoding="UTF-8"?>
 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="vertical"
     android:background="@color/black"
     xmlns:android="http://schemas.android.com/apk/res/android">

     <LinearLayout
             android:layout_width="fill_parent"
             android:layout_height="25dp"
             android:orientation="horizontal"
             android:layout_marginLeft="25dp"
             android:layout_marginRight="10dp"
             android:layout_marginTop="5dp"
             android:gravity="left|center_vertical"
             android:background="@drawable/prompt">
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:textColor="#FFFFFF"
                 android:textStyle="bold"
                 android:textSize="15dp"
                 android:text="@string/glu_value"
                 android:layout_marginLeft="60dp"
                 android:paddingTop="3dp"/>
     </LinearLayout>

     <LinearLayout
         android:id="@+id/gluc_glulay"
         android:orientation="vertical"
         android:layout_width="fill_parent"
         android:layout_height="230dp"
         android:gravity="center_horizontal">
     </LinearLayout>

     <LinearLayout
             android:layout_width="fill_parent"
             android:layout_height="25dp"
             android:orientation="horizontal"
             android:layout_marginLeft="25dp"
             android:layout_marginRight="10dp"
             android:layout_marginTop="5dp"
             android:gravity="left|center_vertical"
             android:background="@drawable/prompt">
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:textColor="#FFFFFF"
                 android:textStyle="bold"
                 android:textSize="15dp"
                 android:text="@string/insulin_value"
                 android:layout_marginLeft="60dp"
                 android:paddingTop="3dp"/>
     </LinearLayout>

     <LinearLayout
         android:id="@+id/gluc_ydslay"
         android:orientation="vertical"
         android:layout_width="fill_parent"
         android:layout_height="230dp"
         android:gravity="center_horizontal">
     </LinearLayout>

 </LinearLayout>

四.下面来到我们的Activity,这部分代码就很简单了，就是实例化控件以及筹备数据，再调用工具类绘图方法即可，就不全部贴出了。

         glu_chart = (LinearLayout)findViewById(R.id.gluc_glulay);
         yds_chart = (LinearLayout)findViewById(R.id.gluc_ydslay);
         sqlitedatabase = DbManager.open(GlucoseChartA

ctivity.this);
         GlucoseDao glucoseDao = new GlucoseDao(sqlitedatabase);
         glulist = glucoseDao.getglucose(getsql(" and GlucoseDate = ? "), new String[]{TimeUtil.getNowDate()});
         //获取数据
         List<String> glu_data = new ArrayList<String>();
         List<String> yds_data = new ArrayList<String>();
         for(int i = 0; i< glulist.size() ;i++)
         {
             glu_data.add(String.valueOf(glulist.get(i).getGlucoseValue()));
             yds_data.add(String.valueOf(glulist.get(i).getGlucoseYDSValue()));
         }
         //调用工具类方法
         AChartEngineUtil.setchart(GlucoseChartActivity.this,glu_chart,new String[]{"血糖值"},new int[]{Color.GREEN},glu_data,"时间","血糖值");
         AChartEngineUtil.setchart(GlucoseChartActivity.this,yds_chart,new String[]{"胰岛素值"},new int[]{Color.YELLOW},yds_data,"时间","胰岛素值");

五，最后看看我们的效果图，我这里随便拟了几条数据