使用AChartEngine畫動態曲線圖

AChartEngine是一個開源的Android圖表庫，可以用來畫折線圖、平滑折線圖、餅圖、直方圖等等。使用簡單，功能強大。

AChartEngine官網：http://www.achartengine.org/

AChartEngine庫文件：http://repository-achartengine.forge.cloudbees.com/snapshot/org/achartengine/achartengine/1.2.0/

庫文件直接導入就可以使用了。

網上介紹AChartEngine的文章很多，不過大多數都只是貼代碼，沒有講述相關類及其原理。最新項目要畫折線圖，搜集了很多資料才弄清楚原理，在此總結整理，希望給讀者一個較清晰的理解，少走彎路。由於我的項目中只用到了折線圖，在此我只講解折線圖，其他圖標原理也是類似的。

AChartEngine官方提供的Demo中，所有的圖表都是使用Intent的方式來畫的，在實際項目中，這種方式不夠靈活，因為一個頁面不可能只顯示圖表，或者不止顯示一個圖表。

AChartEngine給我們提供了GraphicalView這個類，可以靈活的在任何位置插入圖表，非常的方便。

下面對相關類進行講解：

GraphicalView：圖表控件，是一個基本類，也是一個容器控件，所有的圖表都在此控件中呈現；

ChartFactory：工廠類，通過此類來構建不同的圖表對象，比如LineChart(折線圖)、CubeLineChart(圓滑折線圖)、PieChart(餅圖)等；

XYMultipleSeriesDataset：數據集容器，在此類中存放多條曲線的數據集合
XYMultipleSeriesRenderer：渲染器容器，此類初始化坐標系，網格，標題等，還用來存放多條曲線的渲染器
XYSeries：數據集，存放曲線的數據
XYSeriesRenderer：渲染器，存放曲線的參數，比如線條顏色，描點大小等

以下以一個簡單的動態折線圖來展現相關類的調用，其中ChartService是我自己定義的一個類，可以直接使用到實際項目中：

效果圖

 

MainActivity:

package com.example.mychartdemo;

import java.util.Timer;
import java.util.TimerTask;

import org.achartengine.GraphicalView;

import com.ivan.chart.ChartService;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.Menu;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

    private LinearLayout mLeftCurveLayout;//存放左圖表的布局容器
    private LinearLayout mRightCurveLayout;//存放右圖表的布局容器
    private GraphicalView mView, mView2;//左右圖表
    private ChartService mService, mService2;
    private Timer timer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLeftCurveLayout = (LinearLayout) findViewById(R.id.left_temperature_curve);
        mRightCurveLayout = (LinearLayout) findViewById(R.id.right_temperature_curve);

        mService = new ChartService(this);
        mService.setXYMultipleSeriesDataset("左溫度曲線");
        mService.setXYMultipleSeriesRenderer(100, 100, "左溫度曲線", "時間", "溫度",
                Color.RED, Color.RED, Color.RED, Color.BLACK);
        mView = mService.getGraphicalView();

        mService2 = new ChartService(this);
        mService2.setXYMultipleSeriesDataset("右溫度曲線");
        mService2.setXYMultipleSeriesRenderer(100, 100, "右溫度曲線", "時間", "溫度",
                Color.RED, Color.RED, Color.RED, Color.BLACK);
        mView2 = mService2.getGraphicalView();

        //將左右圖表添加到布局容器中
        mLeftCurveLayout.addView(mView, new LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        mRightCurveLayout.addView(mView2, new LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

        timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendMessage(handler.obtainMessage());
            }
        }, 10, 1000);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    private int t = 0;
    private Handler handler = new Handler() {
        @Override
        //定時更新圖表
        public void handleMessage(Message msg) {
            mService.updateChart(t, Math.random() * 100);
            mService2.updateChart(t, Math.random() * 100);
            t+=5;
        }
    };

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (timer != null) {
            timer.cancel();
        }
    }

}

 

ChartService:

package com.ivan.chart;

import java.util.List;

import org.achartengine.ChartFactory;
import org.achartengine.GraphicalView;
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;

public class ChartService {

    private GraphicalView mGraphicalView;
    private XYMultipleSeriesDataset multipleSeriesDataset;// 數據集容器
    private XYMultipleSeriesRenderer multipleSeriesRenderer;// 渲染器容器
    private XYSeries mSeries;// 單條曲線數據集
    private XYSeriesRenderer mRenderer;// 單條曲線渲染器
    private Context context;

    public ChartService(Context context) {
        this.context = context;
    }

    /**
     * 獲取圖表
     * 
     * @return
     */
    public GraphicalView getGraphicalView() {
        mGraphicalView = ChartFactory.getCubeLineChartView(context,
                multipleSeriesDataset, multipleSeriesRenderer, 0.1f);
        return mGraphicalView;
    }

    /**
     * 獲取數據集，及xy坐標的集合
     * 
     * @param curveTitle
     */
    public void setXYMultipleSeriesDataset(String curveTitle) {
        multipleSeriesDataset = new XYMultipleSeriesDataset();
        mSeries = new XYSeries(curveTitle);
        multipleSeriesDataset.addSeries(mSeries);
    }

    /**
     * 獲取渲染器
     * 
     * @param maxX
     *            x軸最大值
     * @param maxY
     *            y軸最大值
     * @param chartTitle
     *            曲線的標題
     * @param xTitle
     *            x軸標題
     * @param yTitle
     *            y軸標題
     * @param axeColor
     *            坐標軸顏色
     * @param labelColor
     *            標題顏色
     * @param curveColor
     *            曲線顏色
     * @param gridColor
     *            網格顏色
     */
    public void setXYMultipleSeriesRenderer(double maxX, double maxY,
            String chartTitle, String xTitle, String yTitle, int axeColor,
            int labelColor, int curveColor, int gridColor) {
        multipleSeriesRenderer = new XYMultipleSeriesRenderer();
        if (chartTitle != null) {
            multipleSeriesRenderer.setChartTitle(chartTitle);
        }
        multipleSeriesRenderer.setXTitle(xTitle);
        multipleSeriesRenderer.setYTitle(yTitle);
        multipleSeriesRenderer.setRange(new double[] { 0, maxX, 0, maxY });//xy軸的范圍
        multipleSeriesRenderer.setLabelsColor(labelColor);
        multipleSeriesRenderer.setXLabels(10);
        multipleSeriesRenderer.setYLabels(10);
        multipleSeriesRenderer.setXLabelsAlign(Align.RIGHT);
        multipleSeriesRenderer.setYLabelsAlign(Align.RIGHT);
        multipleSeriesRenderer.setAxisTitleTextSize(20);
        multipleSeriesRenderer.setChartTitleTextSize(20);
        multipleSeriesRenderer.setLabelsTextSize(20);
        multipleSeriesRenderer.setLegendTextSize(20);
        multipleSeriesRenderer.setPointSize(2f);//曲線描點尺寸
        multipleSeriesRenderer.setFitLegend(true);
        multipleSeriesRenderer.setMargins(new int[] { 20, 30, 15, 20 });
        multipleSeriesRenderer.setShowGrid(true);
        multipleSeriesRenderer.setZoomEnabled(true, false);
        multipleSeriesRenderer.setAxesColor(axeColor);
        multipleSeriesRenderer.setGridColor(gridColor);
        multipleSeriesRenderer.setBackgroundColor(Color.WHITE);//背景色
        multipleSeriesRenderer.setMarginsColor(Color.WHITE);//邊距背景色，默認背景色為黑色，這里修改為白色
        mRenderer = new XYSeriesRenderer();
        mRenderer.setColor(curveColor);
        mRenderer.setPointStyle(PointStyle.CIRCLE);//描點風格，可以為圓點，方形點等等
        multipleSeriesRenderer.addSeriesRenderer(mRenderer);
    }

    /**
     * 根據新加的數據，更新曲線，只能運行在主線程
     * 
     * @param x
     *            新加點的x坐標
     * @param y
     *            新加點的y坐標
     */
    public void updateChart(double x, double y) {
        mSeries.add(x, y);
        mGraphicalView.repaint();//此處也可以調用invalidate()
    }

    /**
     * 添加新的數據，多組，更新曲線，只能運行在主線程
     * @param xList
     * @param yList
     */
    public void updateChart(List<Double> xList, List<Double> yList) {
        for (int i = 0; i < xList.size(); i++) {
            mSeries.add(xList.get(i), yList.get(i));
        }
        mGraphicalView.repaint();//此處也可以調用invalidate()
    }
}

 

布局文件：activity_main:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:text="左溫度曲線" />

        <LinearLayout
            android:id="@+id/left_temperature_curve"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:text="右溫度曲線" />

        <LinearLayout
            android:id="@+id/right_temperature_curve"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

 

詳細說明見注釋。

AChartEngine功能真的很強大，之前一直想要自己來畫曲線圖，浪費了幾天功夫。所以說，站在巨人的肩膀上是很重要的。對於程序員，有一句很重要的話，叫做不要重復造輪子。但是，要使用別人的輪子，必須先要理解透徹，否則很難實現漂亮的效果。

由於筆者水平有限，如有錯漏之處在所難免，歡迎讀者批評指正，感激不盡！

原創文章，轉載請注明出處。

 

全文完