1. 程式人生 > >安卓圖表控制元件WilliamChart使用指南

安卓圖表控制元件WilliamChart使用指南

WilliamChart是github上的一個android圖表控制元件,專案地址:https://github.com/diogobernardino/WilliamChart

該圖表控制元件效果不錯,使用也比較方便。

參考它提供的示例程式,我寫了一個更加簡單的圖表程式,步驟如下:

1.從github上下載專案,將其library專案匯入adt;

2.將其sample專案匯入adt;

3.建立自己的工程,引用library專案,並將sample專案中的DataRetriever類拷貝到本專案的原始碼目錄中;

4.建立一個chart_layout.xml程式碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
   <com.db.chart.view.LineChartView
		xmlns:chart="http://schemas.android.com/apk/res-auto"
		android:id="@+id/linechart"
	    android:layout_width="match_parent"
	    android:layout_height="0dp"
	    android:layout_weight=".30"
	    android:paddingTop="15dp"
	    android:paddingBottom="5dp"
	    android:paddingLeft="10dp"
	    android:paddingRight="10dp"
	    chart:chart_shadowDy="1dp"
	    chart:chart_shadowRadius="1dp"
	    chart:chart_shadowColor="#80000000"
	    chart:chart_axisColor="@color/axis"
	    chart:chart_axisBorderSpacing="0dp">
	</com.db.chart.view.LineChartView>

</LinearLayout>

5.建立一個Activity類,程式碼如下:
package com.example.wxb_example;

import com.db.chart.model.LineSet;
import com.db.chart.model.Point;
import com.db.chart.view.LineChartView;
import com.db.chart.view.YController;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

public class WilliamChartActivity extends Activity {
	//線性圖表控制元件
	private static LineChartView mLineChart;
	private final static String[] mLabels = {"ANT", "GNU", "OWL", "APE", "COD","YAK", "RAM", "JAY"};
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.chart_layout);
		mLineChart = (LineChartView) findViewById(R.id.linechart);
		
		LineSet data;
		mLineChart.reset();
		
		int nSets = 2;  //兩條線
		int nPoints = 5;  //每條線5個點
		for(int i = 0; i < nSets; i++){
			
			data = new LineSet();
			for(int j = 0; j < nPoints; j++)
				data.addPoint(new Point(mLabels[j], DataRetriever.randValue(0, 10)));

			data.setDots(DataRetriever.randBoolean())
				.setDotsColor(Color.parseColor(DataRetriever.getColor(DataRetriever.randNumber(0,2))))
				.setDotsRadius(DataRetriever.randDimen(4,7))
				.setLineThickness(DataRetriever.randDimen(3,8))
				.setLineColor(Color.parseColor(DataRetriever.getColor(i)))
				.setDashed(DataRetriever.randBoolean())
				.setSmooth(DataRetriever.randBoolean())
				;
			
			if(i == 2){
				//data.setFill(Color.parseColor("#3388c6c3"));
				int[] colors = {Color.parseColor("#3388c6c3"), Color.TRANSPARENT};
				data.setGradientFill(colors, null);
			}
			
			if(DataRetriever.randBoolean())
				data.setDotsStrokeThickness(DataRetriever.randDimen(1,4))
				.setDotsStrokeColor(Color.parseColor(DataRetriever.getColor(DataRetriever.randNumber(0,2))))
				;

			mLineChart.addData(data);
		}
		
		mLineChart.setGrid(DataRetriever.randPaint())
			.setVerticalGrid(DataRetriever.randPaint())
			.setHorizontalGrid(DataRetriever.randPaint())
			//.setThresholdLine(2, randPaint())
			.setYLabels(YController.LabelPosition.NONE)
			.setYAxis(false)
			.setXLabels(DataRetriever.getXPosition())
			.setXAxis(DataRetriever.randBoolean())
			.setMaxAxisValue(10, 2)
			.animate(DataRetriever.randAnimation(null, nPoints))
			//.show()
			;
		
	}

}

注意這個類中引用了拷貝過來的DataRetriever類。

執行該專案,效果如下:


其中的效果可以自己再另行操作。