android 轻量级曲线图的绘制

在做项目的时候，我们会遇到将数据以曲线图的形式展现给用户，对于曲线图的要求不同，所有的技术点也差异甚大。如果曲线图具备缩小放大功能，并可拖动xy轴查看以及点击相应节点能取到改点的（x,y）坐标值的功能，像这种较为复杂的曲线图，我建议用achartengine（这种方式我在前面的文章有写过：http://blog.csdn.net/huashanjuji/article/details/46276997），这种方式的缺点是，当节点数达到1万5或2万以上时，往往加载比较耗时。

而在本文中，我所使用的是比较轻量级的方式绘制曲线图，这种方式实现的图，功能相对比较简单，而加载速度则比上一种方式快很多。

效果图如下:

具体实现如下:

相应的支持文件可在此链接下去下载：http://download.csdn.net/detail/huashanjuji/9213139

布局文件:

<?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" >
    <hk.newsoft.line.chart.LineChart 
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="20dp"
        />

</LinearLayout>

曲线图的绘制:

mLineChart = (LineChart) findViewById(R.id.chart);
		List<LineEntity> lines = new ArrayList<LineEntity>();
		List<Float> dates = new ArrayList<Float>();
		for (int i = 0; i < 100; i++) {
			dates.add((float) (i + 0.1));
		}
		LineEntity MA1 = new LineEntity();
		MA1.setTitle("MA1");
		MA1.setLineColor(Color.RED);// 设置曲线的颜色
		MA1.setLineData(dates);// 添加数据
		lines.add(MA1);
		// 纵坐标
		List<String> ytitle = new ArrayList<String>();
		ytitle.add("-200");
		ytitle.add("-100");
		ytitle.add("0");
		ytitle.add("100");
		ytitle.add("200");
		// 横坐标
		List<String> xtitle = new ArrayList<String>();
		xtitle.add("0");
		xtitle.add("40");
		xtitle.add("80");
		xtitle.add("120");
		xtitle.add("160");
		// 曲线参数设置
		mLineChart.setAxisXColor(Color.LTGRAY); // x轴颜色
		mLineChart.setAxisYColor(Color.LTGRAY); // y轴颜色
		mLineChart.setBorderColor(Color.BLUE); // 整个曲线图边框颜色
		mLineChart.setAxisMarginTop(20); // 上边界
		mLineChart.setAxisMarginLeft(20); // 左边界
		mLineChart.setAxisMarginBottom(20);// 下边界
		mLineChart.setAxisYTitles(ytitle); // y轴标注
		mLineChart.setAxisXTitles(xtitle); // x轴标注
		mLineChart.setLongitudeFontSize(20);// x轴标注字体大小
		mLineChart.setLongitudeFontColor(Color.BLACK);// x轴标注颜色
		mLineChart.setLatitudeColor(Color.GRAY);// y轴颜色
		mLineChart.setLatitudeFontColor(Color.BLACK);// y轴标注颜色
		mLineChart.setLongitudeColor(Color.GRAY); // x轴颜色
		mLineChart.setBackgroundColor(Color.WHITE); // 曲线图背景色
		mLineChart.setMaxValue(200); // 坐标上限
		mLineChart.setMinValue(-200); // 坐标下限
		mLineChart.setMaxPointNum(160); // x轴最大点数
		mLineChart.setDisplayAxisXTitle(true);
		mLineChart.setDisplayAxisYTitle(true);
		mLineChart.setDisplayLatitude(true);
		mLineChart.setDisplayLongitude(true);
		mLineChart.setLineData(lines);
		mLineChart.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				float clickPostX = 0;
				float clickPostY = 0;
				// 最大值为1,可以根据点击的比例计算相应坐标点对应的坐标值
				clickPostX = Float.parseFloat(mLineChart
						.getAxisXGraduate(mLineChart.getClickPostX()));
				clickPostY = Float.parseFloat(mLineChart
						.getAxisYGraduate(mLineChart.getClickPostY()));

				Toast.makeText(getApplicationContext(),
						clickPostX + " <-->  " + clickPostY, 0).show();
			}
		});