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();
}
});