Android-曲線圖 折線圖

只要有關數據分析的 App 我相信一定對曲線圖不陌生吧
今天就來做一個簡易的 Sample ( 範例 )

首先分析順序 :

1. 資料
2. 曲線圖 折線圖 風格
3. 放置目標

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="@string/str_tv_title" />

    <LinearLayout
        android:id="@+id/chart_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_margin="8dip" >
    </LinearLayout>

</LinearLayout>

MainActivity.class

package com.example.ach;

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.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
    
    private View mChart;
     
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        
        List<String> list_D = new ArrayList<String>();
        for(int i = 0; i <10; i++){
            list_D.add("" + 100+i);
        }
        
        List<Integer> list_C = new ArrayList<Integer>();
        for(int i = 0; i <10; i++){
            list_C.add((int)(Math.random()*42+1));
        }
        
        LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container);
        chartContainer.addView(LineChartView.ChartView(MainActivity.this, "Hello", "Count", list_D, list_C));
                
    }    

}

LineCharView.class

package com.example.ach;

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.view.View;

public class LineChartView {

    private static Context mContext;
    /**
     * 
     * @param chartTitle GraphTitle
     * @param XYSeries meaning of Series
     * @param list_Date X Data
     * @param list_Count Y Data
     * @return
     */
    public static View ChartView(Context context, String chartTitle, 
                String XYSeries, List<String> list_Date, List<Integer> list_Count) {
                    
        LineChartView.mContext = context;
        
        // 資料來源及命名
        XYSeries xySeries = new XYSeries(XYSeries);
        for(int i=0;i<list_Count.size();i++){
            xySeries.add(i+1, list_Count.get(i));
        }

        // Creating a dataset to hold each series
        XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
        // Adding Income Series to the dataset
        dataset.addSeries(xySeries);

        // 線的描述
        XYSeriesRenderer xySeriesRenderer = new XYSeriesRenderer();
        xySeriesRenderer.setColor(Color.RED);
        xySeriesRenderer.setChartValuesTextSize(40);// Value Text Size
        xySeriesRenderer.setPointStyle(PointStyle.CIRCLE);
        xySeriesRenderer.setFillPoints(true);
        xySeriesRenderer.setLineWidth(5);
        xySeriesRenderer.setDisplayChartValues(true);

        XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
        multiRenderer.setXLabels(0);
        multiRenderer.setChartTitle(chartTitle);
        multiRenderer.setChartTitleTextSize(40);
        multiRenderer.setXTitle("Date");// X Title
        multiRenderer.setYTitle("Count");// Y Title
        multiRenderer.setLabelsTextSize(40);// Label Text Size
        multiRenderer.setAxisTitleTextSize(40);// Axis Title Text Size
        multiRenderer.setZoomButtonsVisible(true);// Zoom?
        multiRenderer.setShowGrid(true);// show Grid
        for(int i=0; i<list_Date.size(); i++){
            multiRenderer.addXTextLabel(i+1, "" + list_Date.get(i).toString());
        }

        multiRenderer.addSeriesRenderer(xySeriesRenderer);

        View mChart = ChartFactory.getLineChartView(mContext, dataset, multiRenderer);

        return mChart;

    }

}

範例圖示 :

參考資料：MPAndroidChart
參考資料：MPAndroidChart 教程：概述
參考資料 : Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
參考資料 : Android chart tutorial: AChartEngine - Line chart, Bar chart, Range bar
參考資料 : [Andriod] 透過AChartEngine實現BarChart
參考資料 : achartengine之折线图---简单用法

歡迎轉載，請註明出處。