【Android开源框架】使用andbase开发框架实现绘制折线图

在Android中，当有绘制折线图的需求时，大多数人使用的AChartEngine，来进行折线图的绘制。AChartEngine图表引擎确实可以实现折线图的功能，除此之外，我们还可以使用andbase开发框架里面的图表模块，实现图标的绘制。前面文章介绍了使用andbase开发框架实现侧滑栏效果，今天，我们学习如何实现折线的绘制。

首先，我们还是看一下效果图

我们模拟的是一家公司12个月中，两项不同业务的销售额变化，可以看到，效果还是非常不错的。

下面，我们开始介绍如何使用andbase实现这个效果。

首先，我们看一下项目结构，非常简单的结构

就一个xml，一个activity，再加上andbase框架。下面，我们先看一下布局文件

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

</LinearLayout>

也是非常简单，只有一个线性布局文件。

最主要的东西都在Activity中，下面给出代码以及注释

/**
 * 
 * @ClassName: MainActivity
 * @Description: andbase框架实现表格的绘制
 * @author: ZhaoKaiQiang
 * @time: 2014-7-17下午3:21:11
 * @version: V1.0
 */
public class MainActivity extends Activity {

	private LinearLayout linearLayout;
	// 折线说明文字
	private String[] titles = new String[] { "业务一", "业务二" };
	// 数据
	private List<double[]> values;
	// 每个数据点的颜色
	private List<int[]> colors;
	// 每个数据点的简要 说明
	private List<String[]> explains;
	// 折线的线条颜色
	private int[] mSeriescolors;
	// 渲染器
	private XYMultipleSeriesRenderer renderer;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		linearLayout = (LinearLayout) findViewById(R.id.chart);
		initValues();
		drawChart();
	}

	/**
	 * 初始化数据
	 */
	private void initValues() {
		values = new ArrayList<double[]>();
		colors = new ArrayList<int[]>();
		explains = new ArrayList<String[]>();

		values.add(new double[] { 500, 450, 700, 710, 420, 430, 400, 390, 290,
				400, 340, 500 });
		values.add(new double[] { 523, 450, 320, 370, 480, 570, 420, 350, 400,
				450, 700, 710 });

		colors.add(new int[] { Color.RED, Color.RED, Color.RED, Color.RED,
				Color.RED, Color.RED, Color.RED, Color.RED, Color.RED,
				Color.RED, Color.RED, Color.RED });
		colors.add(new int[] { Color.BLUE, Color.BLUE, Color.BLUE, Color.BLUE,
				Color.GREEN, Color.BLUE, Color.BLUE, Color.BLUE, Color.BLUE,
				Color.BLUE, Color.BLUE, Color.BLUE });

		explains.add(new String[] { "1月业绩", "2月业绩", "3月业绩", "4月业绩", "5月业绩",
				"6月业绩", "7月业绩", "8月业绩", "9月业绩", "10月业绩", "11月业绩", "12月业绩" });
		explains.add(new String[] { "1月业绩", "2月业绩", "3月业绩", "4月业绩", "5月业绩",
				"6月业绩", "7月业绩", "8月业绩", "9月业绩", "10月业绩", "11月业绩", "12月业绩" });

		mSeriescolors = new int[] { Color.rgb(153, 204, 0),
				Color.rgb(247, 185, 64) };
	}

	/**
	 * 开始绘折线图
	 */
	private void drawChart() {
		renderer = new XYMultipleSeriesRenderer();
		int length = mSeriescolors.length;
		for (int i = 0; i < length; i++) {
			// 创建SimpleSeriesRenderer单一渲染器
			XYSeriesRenderer r = new XYSeriesRenderer();
			// 设置渲染器颜色
			r.setColor(mSeriescolors[i]);
			r.setFillPoints(true);
			r.setPointStyle(PointStyle.SQUARE);
			r.setLineWidth(1);
			r.setChartValuesTextSize(16);
			renderer.addSeriesRenderer(r);
		}
		// 坐标轴标题文字大小
		renderer.setAxisTitleTextSize(16);
		// 图形标题文字大小
		renderer.setChartTitleTextSize(25);
		// 轴线上标签文字大小
		renderer.setLabelsTextSize(15);
		// 说明文字大小
		renderer.setLegendTextSize(15);
		// 图表标题
		renderer.setChartTitle("公司2014年销售业绩折线图");
		// X轴标题
		renderer.setXTitle("时间/月");
		// Y轴标题
		renderer.setYTitle("销售额/万元");
		// X轴最小坐标点
		renderer.setXAxisMin(0);
		// X轴最大坐标点
		renderer.setXAxisMax(12);
		// Y轴最小坐标点
		renderer.setYAxisMin(0);
		// Y轴最大坐标点
		renderer.setYAxisMax(800);
		// 坐标轴颜色
		renderer.setAxesColor(Color.rgb(51, 181, 229));
		renderer.setXLabelsColor(Color.rgb(51, 181, 229));
		renderer.setYLabelsColor(0, Color.rgb(51, 181, 229));
		// 设置图表上标题与X轴与Y轴的说明文字颜色
		renderer.setLabelsColor(Color.GRAY);
		// 设置字体加粗
		renderer.setTextTypeface("sans_serif", Typeface.BOLD);
		// 设置在图表上是否显示值标签
		renderer.getSeriesRendererAt(0).setDisplayChartValues(true);
		renderer.getSeriesRendererAt(1).setDisplayChartValues(true);
		// 显示屏幕可见取区的XY分割数
		renderer.setXLabels(12);
		renderer.setYLabels(8);
		// X刻度标签相对X轴位置
		renderer.setXLabelsAlign(Align.CENTER);
		// Y刻度标签相对Y轴位置
		renderer.setYLabelsAlign(Align.LEFT);
		renderer.setPanEnabled(true, true);
		renderer.setZoomEnabled(true);
		renderer.setZoomButtonsVisible(true);
		renderer.setZoomRate(1.1f);
		renderer.setBarSpacing(0.5f);

		// 标尺开启
		renderer.setScaleLineEnabled(true);
		// 设置标尺提示框高
		renderer.setScaleRectHeight(10);
		// 设置标尺提示框宽
		renderer.setScaleRectWidth(150);
		// 设置标尺提示框背景色
		renderer.setScaleRectColor(Color.argb(150, 52, 182, 232));
		renderer.setScaleLineColor(Color.argb(175, 150, 150, 150));
		renderer.setScaleCircleRadius(35);
		// 第一行文字的大小
		renderer.setExplainTextSize1(20);
		// 第二行文字的大小
		renderer.setExplainTextSize2(20);

		// 临界线
		double[] limit = new double[] { 15000, 12000, 4000, 9000 };
		renderer.setmYLimitsLine(limit);
		int[] colorsLimit = new int[] { Color.rgb(100, 255, 255),
				Color.rgb(100, 255, 255), Color.rgb(0, 255, 255),
				Color.rgb(0, 255, 255) };
		renderer.setmYLimitsLineColor(colorsLimit);

		// 显示表格线
		renderer.setShowGrid(true);
		// 如果值是0是否要显示
		renderer.setDisplayValue0(true);
		// 创建渲染器数据填充器
		XYMultipleSeriesDataset mXYMultipleSeriesDataset = new XYMultipleSeriesDataset();
		for (int i = 0; i < length; i++) {
			CategorySeries series = new CategorySeries(titles[i]);
			double[] v = values.get(i);
			int[] c = colors.get(i);
			String[] e = explains.get(i);
			int seriesLength = v.length;
			for (int k = 0; k < seriesLength; k++) {
				// 设置每个点的颜色
				series.add(v[k], c[k], e[k]);
			}
			mXYMultipleSeriesDataset.addSeries(series.toXYSeries());
		}
		// 背景
		renderer.setApplyBackgroundColor(true);
		renderer.setBackgroundColor(Color.rgb(222, 222, 200));
		renderer.setMarginsColor(Color.rgb(222, 222, 200));

		// 线图
		View chart = ChartFactory.getLineChartView(this,
				mXYMultipleSeriesDataset, renderer);
		linearLayout.addView(chart);
	}

}

注释很清楚，就不过多介绍啦。

本来想上传源代码的，但是CSDN下载频道又挂掉了...

有需要的留言吧，那时候我在上传吧