首页 > 代码库 > Android画折线图、柱状图、饼图(使用achartengine.jar)

Android画折线图、柱状图、饼图(使用achartengine.jar)

自从用了画折线的jar包之后,就不想再用canvas画布去画了,编程就是要站在巨人的肩膀上。

  • 所需要的jar包achartenginejar
  • 折线代码布局文件就不上传了很简单
    • 另一种线的渲染器
  • 扇形图代码
  • 柱状图代码
  • 属性总结部分代码
  • 新测试代码下载地址


所需要的jar包:achartengine.jar

下载地址:http://download.csdn.net/detail/zhengyikuangge/9460642


折线代码(布局文件就不上传了,很简单):

package com.example.chartest02;

import java.text.SimpleDateFormat;
import java.util.Date;

import org.achartengine.ChartFactory;
import org.achartengine.GraphicalView;
import org.achartengine.chart.PointStyle;
import org.achartengine.model.XYMultipleSeriesDataset;
import org.achartengine.model.XYSeries;
import org.achartengine.renderer.XYMultipleSeriesRenderer;
import org.achartengine.renderer.XYSeriesRenderer;

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

public class MainActivity extends Activity {
    XYMultipleSeriesDataset mDataset;
    // 多个系列的数据集合,即多条线的数据集合
    XYSeries series;
    // 一个系列的数据,即一条线的数据集合

    XYMultipleSeriesRenderer mRenderer;
    // 多个系列的环境渲染,即整个画折线的区域
    XYSeriesRenderer r;
    // 一个系列的环境渲染,即一条线的环境渲染
    GraphicalView view;
    // 整个view
    int i = 5;
    LinearLayout ll;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ll = (LinearLayout) findViewById(R.id.ll);
        lineView();
        new Thread(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                while (true) {
                    double d = Math.random() * 15;
                    series.add(i, d);
                    mRenderer.addXTextLabel(i, nowtime());
                    //动态添加数据和标题
                    view.repaint();
                    //重绘折线
                    i++;
                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }

    public void lineView() {
        // 同样是需要数据dataset和视图渲染器renderer
        mDataset = new XYMultipleSeriesDataset();
        series = new XYSeries("Frist");
        series.add(1, 6);
        series.add(2, 5);
        series.add(3, 7);
        series.add(4, 4);
        mDataset.addSeries(series);

        mRenderer = new XYMultipleSeriesRenderer();

        mRenderer
                .setOrientation(XYMultipleSeriesRenderer.Orientation.HORIZONTAL);
        // 设置图表的X轴的当前方向
        mRenderer.setXTitle("X轴");// 设置为X轴的标题
        mRenderer.setYTitle("Y轴");// 设置y轴的标题
        mRenderer.setAxisTitleTextSize(20);// 设置轴标题文本大小
        mRenderer.setChartTitle("ChartTest");// 设置图表标题
        mRenderer.setChartTitleTextSize(30);// 设置图表标题文字的大小
        mRenderer.setLabelsTextSize(18);// 设置标签的文字大小
        mRenderer.setLegendTextSize(20);// 设置图例文本大小
        mRenderer.setPointSize(10f);// 设置点的大小
        mRenderer.setYAxisMin(0);// 设置y轴最小值是0
        mRenderer.setYAxisMax(15);
        mRenderer.setYLabels(10);// 设置Y轴刻度个数(貌似不太准确)
        mRenderer.setXAxisMax(5);//设置X轴坐标个数


        // 将x标签栏目显示如:1,2,3,4替换为显示1月,2月,3月,4月
        mRenderer.addXTextLabel(1, "1月");
        mRenderer.addXTextLabel(2, "2月");
        mRenderer.addXTextLabel(3, "3月");
        mRenderer.addXTextLabel(4, "4月");
        mRenderer.setXLabels(0);// 设置只显示如1月,2月等替换后的东西,不显示1,2,3等
        mRenderer.setMargins(new int[] { 20, 30, 15, 20 });// 设置视图位置
        mRenderer.setPanEnabled(true, false);
        // 第一个参数设置X轴是否可滑动,第二个参数设置Y轴是够可滑动
        r = new XYSeriesRenderer();
        r.setColor(Color.BLUE);// 设置颜色
        r.setPointStyle(PointStyle.CIRCLE);// 设置点的样式
        r.setFillPoints(true);// 填充点(显示的点是空心还是实心)
        r.setDisplayChartValues(true);// 将点的值显示出来
        r.setChartValuesSpacing(10);// 显示的点的值与图的距离
        r.setChartValuesTextSize(25);// 点的值的文字大小

        // r.setFillBelowLine(true);//是否填充折线图的下方
        // r.setFillBelowLineColor(Color.GREEN);//填充的颜色,如果不设置就默认与线的
        //颜色一致
        r.setLineWidth(3);// 设置线宽
        mRenderer.addSeriesRenderer(r);

        view = ChartFactory.getLineChartView(this, mDataset, mRenderer);
        view.setBackgroundColor(Color.BLACK);
        ll.addView(view);
        //将画好折线的view添加到xml中的一个布局里
    }

    private String nowtime() {
    //求当前系统的时分秒
        SimpleDateFormat format = new SimpleDateFormat("HH:mm:ss");
        return format.format(new Date());

    }
}

我现在一直想实现的是:x轴可以跟着移动起来,但是一直找不到合适的办法,网上说改x轴的最大值,但效果并不理想,待定。。。


另一种线的渲染器:

ColoursXYSeriesRenderer rendererMajor = new 
ColoursXYSeriesRenderer();
rendererMajor.setPointStyle(PointStyle.CIRCLE);
// 设置为曲线图
rendererMajor.setFillPoints(true);// 数据点被填充
rendererMajor.setDisplayChartValues(true);
// 在图表中显示点的值
rendererMajor.setDisplayChartValuesDistance(1);
// 在X轴上,设置两点之间的距离
rendererMajor.setColor(Color.WHITE);
// 设置线的颜色
rendererMajor.setChartValuesTextSize(25);
// 设置点值文本的尺寸大小
rendererMajor.setChartValuesSpacing(15f);
// 实时数据文本到中心点的间距
rendererMajor.setUseColor(true);// 设置当前为双色曲线图
rendererMajor.setPointColor(Color.GREEN);// 设置点的颜色
rendererMajor.setChartValueTextColor(Color.WHITE);
// 设置数值文本的颜色
rendererMajor.setWarningMinValue(0);
// 设置告警最小值,新属性
rendererMajor.setWarningMaxValue(5);
// 设置告警最大值,新属性

扇形图代码:

public class PieChartBuilder extends Activity {

    private GraphicalView mChartView;//显示PieChart

    private LinearLayout mLinear;//布局方式

    // public void back(View v) {
    // Log.i("qiuzhping", "back onClick");
    // Intent intent = new Intent();
    // intent.setClass(PieChartBuilder.this, MainActivity.class);
    // startActivity(intent);
    // PieChartBuilder.this.finish();
    // }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.xy_chart);

        mLinear = (LinearLayout) findViewById(R.id.chart);
        mLinear.setBackgroundColor(Color.BLACK);

        if (mChartView == null) {// 为空需要从ChartFactory获取PieChartView
            int[] COLORS = new int[] { Color.RED, Color.GREEN, Color.BLUE,
                    Color.MAGENTA, Color.CYAN, Color.YELLOW, Color.DKGRAY };
            double data[] = new double[] { 20, 30, 40, 50, 60, 70, 80, 90, 100 };

            final CategorySeries mSeries = new CategorySeries("");

            final DefaultRenderer mRenderer = new DefaultRenderer();

            double VALUE = http://www.mamicode.com/0;// 总数
            mRenderer.setZoomButtonsVisible(true);// 显示放大缩小功能按钮
            mRenderer.setStartAngle(180);// 设置为水平开始
            mRenderer.setDisplayValues(true);// 显示数据
            mRenderer.setFitLegend(true);// 设置是否显示图例
            mRenderer.setLegendTextSize(10);// 设置图例字体大小
            mRenderer.setLegendHeight(10);// 设置图例高度
            mRenderer.setChartTitle("饼图示例");// 设置饼图标题

            for (int i = 0; i < data.length; i++)
                VALUE += data[i];
            for (int i = 0; i < data.length; i++) {
            /*这里是重点,只要把数值/总值赋给mSeries,它就可以自动生成每一部分*/
                mSeries.add("示例 " + (i + 1), data[i] / VALUE);// 设置种类名称和对应的数值,前面是(key,value)键值对
                SimpleSeriesRenderer renderer = new SimpleSeriesRenderer();
                if (i < COLORS.length) {
                    renderer.setColor(COLORS[i]);// 设置描绘器的颜色
                } else {
                    renderer.setColor(getRandomColor());// 设置描绘器的颜色
                }
                renderer.setChartValuesFormat(NumberFormat.getPercentInstance());// 设置百分比
                mRenderer.setChartTitleTextSize(14);// 设置饼图标题大小
                mRenderer.addSeriesRenderer(renderer);// 将最新的描绘器添加到DefaultRenderer中
            }

            mChartView = ChartFactory.getPieChartView(getApplicationContext(),
                    mSeries, mRenderer);// 构建mChartView
            mRenderer.setClickEnabled(true);// 允许点击事件
            mChartView.setOnClickListener(new View.OnClickListener() {// 具体内容
                        @Override
                        public void onClick(View v) {
                            SeriesSelection seriesSelection = mChartView
                                    .getCurrentSeriesAndPoint();// 获取当前的类别和指针
                            if (seriesSelection == null) {
                                Toast.makeText(getApplicationContext(),
                                        "您未选择数据", Toast.LENGTH_SHORT).show();
                            } else {
                                for (int i = 0; i < mSeries.getItemCount(); i++) {
                                    mRenderer.getSeriesRendererAt(i)
                                            .setHighlighted(
                                                    i == seriesSelection
                                                            .getPointIndex());
                                }
                                mChartView.repaint();
                                Toast.makeText(
                                        getApplicationContext(),
                                        "您选择的是第"
                                                + (seriesSelection
                                                        .getPointIndex() + 1)
                                                + " 项 "
                                                + " 百分比为  "
                                                + NumberFormat
                                                        .getPercentInstance()
                                                        .format(seriesSelection
                                                                .getValue()),
                                        Toast.LENGTH_SHORT).show();
                            }
                        }
                    });
            mLinear.addView(mChartView, new LayoutParams(
                    LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        } else {
            mChartView.repaint();
        }
    }

    private int getRandomColor() {// 分别产生RBG数值
        Random random = new Random();
        int R = random.nextInt(255);
        int G = random.nextInt(255);
        int B = random.nextInt(255);
        return Color.rgb(R, G, B);
    }
}

柱状图代码

public class BarChartBuilder extends Activity {

    private GraphicalView mChartView;

    // public void back(View v) {
    // Log.i("qiuzhping", "back onClick");
    // Intent intent = new Intent();
    // intent.setClass(BarChartBuilder.this, MainActivity.class);
    // startActivity(intent);
    // BarChartBuilder.this.finish();
    // }

    protected void setChartSettings(XYMultipleSeriesRenderer renderer,
            String title, String xTitle, String yTitle, double xMin,
            double xMax, double yMin, double yMax, int axesColor,
            int labelsColor) {
        renderer.setChartTitle(title);
        renderer.setXTitle(xTitle);
        renderer.setYTitle(yTitle);
        renderer.setXAxisMin(xMin);
        renderer.setXAxisMax(xMax);
        renderer.setYAxisMin(yMin);
        renderer.setYAxisMax(yMax);
        renderer.setAxesColor(axesColor);
        renderer.setLabelsColor(labelsColor);
    }

    protected XYMultipleSeriesRenderer buildBarRenderer(int[] colors) {
        XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
        renderer.setAxisTitleTextSize(16);
        renderer.setChartTitleTextSize(20);
        renderer.setLabelsTextSize(15);
        renderer.setLegendTextSize(15);
        int length = colors.length;
        for (int i = 0; i < length; i++) {
            SimpleSeriesRenderer r = new SimpleSeriesRenderer();
            r.setColor(colors[i]);
            renderer.addSeriesRenderer(r);
        }
        return renderer;
    }

    protected XYMultipleSeriesDataset buildBarDataset(String[] titles,
            List<double[]> values) {//柱形图的数据源和饼图差不多,也是由一些键值对组成
        XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
        int length = titles.length;
        for (int i = 0; i < length; i++) {
            CategorySeries series = new CategorySeries(titles[i]);
            double[] v = values.get(i);
            int seriesLength = v.length;
            for (int k = 0; k < seriesLength; k++) {
                series.add(v[k]);
            }
            dataset.addSeries(series.toXYSeries());
        }
        return dataset;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.xy_chart);
        LinearLayout mLinear = (LinearLayout) findViewById(R.id.chart);
        mLinear.setBackgroundColor(Color.BLACK);

        String[] titles = new String[] { "2012", "2013" };
        List<double[]> values = new ArrayList<double[]>();
        values.add(new double[] { 1423, 1230, 1424, 1524, 1590, 1920, 2203,
                2120, 1950, 1550, 1260, 1400 });
        values.add(new double[] { 523, 730, 924, 1054, 790, 920, 1200, 1100,
                950, 1500, 1100, 1500 });
        int[] colors = new int[] { Color.RED, Color.BLUE };
        XYMultipleSeriesRenderer renderer = buildBarRenderer(colors);// 柱形图颜色设置
        setChartSettings(renderer, "柱形图示例", "月份", "数量", 0.5, 12.5, 0, 2400,
                Color.GRAY, Color.LTGRAY);// 设置柱形图标题,横轴(X轴)、纵轴(Y轴)、最小的伸所刻度、最大的伸所刻度
        renderer.getSeriesRendererAt(0).setDisplayChartValues(true);// 在第0条柱形图上显示数据
        renderer.getSeriesRendererAt(1).setDisplayChartValues(true);// 在第1条柱形图上显示数据
        renderer.setXLabels(12);
        renderer.setYLabels(10);
        renderer.setXLabelsAlign(Align.LEFT);// 数据从左到右显示
        renderer.setYLabelsAlign(Align.LEFT);
        renderer.setPanEnabled(true, false);
        renderer.setZoomEnabled(true);
        renderer.setZoomButtonsVisible(true);// 显示放大缩小功能按钮
        renderer.setZoomRate(1.1f);
        renderer.setBarSpacing(0.5f);// 柱形图间隔

        if (mChartView == null) {// 构建柱形图
            mChartView = ChartFactory.getBarChartView(getApplicationContext(),
                    buildBarDataset(titles, values), renderer, Type.DEFAULT);
            renderer.setClickEnabled(true);
            //renderer.set
            mLinear.addView(mChartView, new LayoutParams(
                    LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        } else
            mChartView.repaint();
    }
}

属性总结(部分代码):

mRenderer = new XYMultipleSeriesRenderer();
        renderer = new ColoursXYSeriesRenderer();
        series = new XYSeries("FF");
        //线的名称
        dataset = new XYMultipleSeriesDataset();
        series.add(0, 10);
        series.add(1, 10);
        // series 添加数据点,第一个参数为x轴坐标,0代表原点;第二个参数为Y轴坐标
        dataset.addSeries(series);
        renderer.setDisplayChartValues(true);// 是否显示数据
        renderer.setPointStyle(PointStyle.CIRCLE);// 点的样式
        renderer.setWarningMaxValue(300);// 最大警告值
        renderer.setFillPoints(true);// 是否填充点
        renderer.setColor(Color.BLACK);// 设置线的颜色
        renderer.setUseColor(true);// 是否用双色
        renderer.setLineWidth(8f);// 设置线的宽度
        renderer.setChartValuesTextSize(25f);// 线值字的大小
        renderer.setChartValueTextColor(Color.GREEN); // 折线值的颜色
        renderer.setChartValuesSpacing(20f);// 值到线的举例

        mRenderer.setOrientation(Orientation.HORIZONTAL);// 设置总方向
        mRenderer.setXAxisMax(5);// X轴最大坐标数
        mRenderer.setXLabels(0);// X轴不显示默认自带的坐标
        mRenderer.setYAxisMax(500);// Y轴最大数值为500
        mRenderer.setYAxisMin(0);// Y轴最小数值为0
        mRenderer.setYLabels(5);// Y轴坐标为5个
        mRenderer.setXLabelsColor(Color.BLACK);
        mRenderer.setYLabelsColor(0, Color.BLACK);
        mRenderer.setLabelsTextSize(25f);// 标签的颜色
        mRenderer.setChartTitle("Test");// 设置图标的标题
        mRenderer.setDisplayValues(true);// 是否显示数据
        mRenderer.setPanEnabled(false, false);// 第一个参数为X轴不可滑动,第二个参数为X轴不可滑动
        mRenderer.setPointSize(15f);// 点的大小
        mRenderer.addSeriesRenderer(renderer);

        view_test = ChartFactory.getLineChartView(context, dataset, mRenderer);
        // 设置背景颜色一定要在生成View之后再设置
        mRenderer.setApplyBackgroundColor(true);
        // 是否应用背景颜色
        mRenderer.setBackgroundColor(Color.TRANSPARENT);
        // 设置背景颜色为透明
        mRenderer.setMarginsColor(Color.TRANSPARENT);
        // 设置图表之外的背景颜色为透明

新测试代码下载地址:

http://download.csdn.net/detail/zhengyikuangge/9517499

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

    Android画折线图、柱状图、饼图(使用achartengine.jar)