【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;@Overridepublic 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下载频道又挂掉了...

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