Android开发学习之路--图表实现(achartengine/MPAndroidChart)之初体验

谁践踏了优雅 2022-05-27 01:47 470阅读 0赞

 已经有一段时间没有更新博客了，在上周离开工作了4年的公司，从此不再安安稳稳地工作了，更多的是接受挑战和实现自身价值的提高。离开了嵌入式linux，从此拥抱移动互联网，也许有点为时已晚，但是相信通过努力，什么时候都不会太晚。关于转行，关于这次的转型会不会成功，都是未知数，谁知道呢。以后就好好学习互联网相关的知识，偶尔业余玩玩树莓派，玩玩机器人之类的。
  时间过得很快，已经在新公司待了一周了，简单熟悉了环境，熟悉了产品，也学了些第三份框架的使用，什么data binding， retrofit， picasso，rxjava/rxandroid等。虽然学得不快，也算是了解了部分了，这些后面再慢慢地总结。
   唠叨了一大堆，还是记录记录android下的图表的简单实现吧。关于android的图表，这里就换作chart吧，如果要自己实现的话，那工作量可是很大的，好在有好几个开源的框架可以拿来使用，首先是achartengine了：achartengine github源码链接。其次是MPAndroidChart：MPAndroidChart github源码链接。关于更详细的介绍可以参考上面的链接，这里主要是简单讲下使用。因为没找到android studio的dependencies，所以就网上下载了相应的jar包了，具体已经在百度云上了，可以参考下面的链接。
链接: http://pan.baidu.com/s/1i4N2glB 密码: 2fe2

运行效果如下

20160403120621726

   这里依次是atchartengine的折线图，MPAndroidChart的折线图和饼图。

achartengine

  至于怎么包含jar包，怎么建工程这就不多讲了，既然都要学习第三方的框架了，这些基础肯定有的了。首先是怎么把chart安在界面上，achartengine可以直接使用LinearLayout，然后把需要的chart绘画在这个LinearLayout上。具体xml如下所示：

  1. <LinearLayout
  2.     android:id="@+id/chart"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="150dp"
  5.     android:orientation="vertical">
  6. </LinearLayout>

  具体代码实现如下，基本上都加了注释了，理解起来还是很方便的了，具体看ChartActivity代码中：

  当然atchartengine还有其他更加强大的功能，这里只是简单用了下折线图。

MPAndroidChart

折线图配置

  MPAndroidChart的实现需要用到自定义的空间com.github.mikephil.charting.charts.LineChart来实现折线图：

  1. <com.github.mikephil.charting.charts.LineChart
  2.     android:id="@+id/spread_line_chart"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="150dp" />
  • 1
  • 2
  • 3
  • 4

饼图配置

  MPAndroidChart的实现需要用到自定义的空间com.github.mikephil.charting.charts.PieChart来实现折线图：

  1. <com.github.mikephil.charting.charts.PieChart
  2.     android:id="@+id/spread_pie_chart"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="200dp"/>

act_chart xml实现

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical">
  7.     <LinearLayout
  8.         android:id="@+id/chart"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="150dp"
  11.         android:orientation="vertical">
  12.     </LinearLayout>
  14.     <com.github.mikephil.charting.charts.LineChart
  15.         android:id="@+id/spread_line_chart"
  16.         android:layout_width="match_parent"
  17.         android:layout_height="150dp" />
  18.     <com.github.mikephil.charting.charts.PieChart
  19.         android:id="@+id/spread_pie_chart"
  20.         android:layout_width="match_parent"
  21.         android:layout_height="200dp"/>
  22.     <Button
  23.         android:id="@+id/getData"
  24.         android:layout_height="wrap_content"
  25.         android:layout_width="match_parent"
  26.         android:text="获取当访问量" />
  27. </LinearLayout>

ChartActivity java代码实现：

  代码的主要介绍在注释里面：

  1. package com.jared.emdatabindingstudy.ui;
  3. import android.graphics.Color;
  4. import android.graphics.Paint;
  5. import android.graphics.Typeface;
  6. import android.os.Bundle;
  7. import android.support.annotation.Nullable;
  8. import android.util.DisplayMetrics;
  9. import android.view.View;
  10. import android.widget.Button;
  11. import android.widget.LinearLayout;
  13. import com.github.mikephil.charting.charts.LineChart;
  14. import com.github.mikephil.charting.charts.PieChart;
  15. import com.github.mikephil.charting.components.Legend;
  16. import com.github.mikephil.charting.components.XAxis;
  17. import com.github.mikephil.charting.components.YAxis;
  18. import com.github.mikephil.charting.data.Entry;
  19. import com.github.mikephil.charting.data.LineData;
  20. import com.github.mikephil.charting.data.LineDataSet;
  21. import com.github.mikephil.charting.data.PieData;
  22. import com.github.mikephil.charting.data.PieDataSet;
  23. import com.jared.emdatabindingstudy.R;
  25. import org.achartengine.ChartFactory;
  26. import org.achartengine.GraphicalView;
  27. import org.achartengine.chart.PointStyle;
  28. import org.achartengine.model.CategorySeries;
  29. import org.achartengine.model.XYMultipleSeriesDataset;
  30. import org.achartengine.renderer.XYMultipleSeriesRenderer;
  31. import org.achartengine.renderer.XYSeriesRenderer;
  33. import java.util.ArrayList;
  34. import java.util.List;
  36. /**
  37.  * Created by jared on 16/4/1.
  38.  */
  39. public class ChartActivity extends BaseActivity {
  41.     private final static String TAG = ChartActivity.class.getSimpleName();
  43.     private LinearLayout chartLyt;
  44.     private LineChart mLineChart;
  45.     private PieChart mPieChart;
  46.     Typeface mTf; // 自定义显示字体
  48.     private Button getDataBtn;
  50.     private List<Integer> lists = new ArrayList<Integer>();
  52.     private void setLists() {
  53.         lists.clear();
  54.         for (int i = 1; i < 20; i++) {
  56.             int value = ((int) (Math.random() * 100));
  57.             lists.add(value);
  58.         }
  59.     }
  61.     @Override
  62.     protected void onCreate(@Nullable Bundle savedInstanceState) {
  63.         super.onCreate(savedInstanceState);
  64.         setContentView(R.layout.act_chart);
  65.         getDataBtn = (Button) findViewById(R.id.getData);
  66.         getDataBtn.setOnClickListener(this);
  67.         chartLyt = (LinearLayout) findViewById(R.id.chart);
  68.         mTf = Typeface.createFromAsset(getAssets(), "OpenSans-Bold.ttf");
  70.         drawTheChart();
  71.         drawTheChartByMPAndroid();
  72.         drawPieChart();
  73.     }
  75.     private void drawPieChart() {
  76.         mPieChart = (PieChart) findViewById(R.id.spread_pie_chart);
  77.         PieData mPieData = getPieData(4, 100);
  78.         showPieChart(mPieChart, mPieData);
  79.     }
  81.     private void showPieChart(PieChart pieChart, PieData pieData) {
  82.         pieChart.setHoleColorTransparent(true);
  84.         pieChart.setHoleRadius(40f); //半径
  85.         pieChart.setTransparentCircleRadius(50f); //半透明圈
  87.         pieChart.setDescription("");
  89.         pieChart.setDrawHoleEnabled(true);
  91.         pieChart.setRotationAngle(90); //初始角度
  92.         pieChart.setRotationEnabled(true); //可以手动旋转
  93.         pieChart.setUsePercentValues(true); //显示百分比
  95.         pieChart.setDrawCenterText(true); //饼状图中间可以添加文字
  96.         pieChart.setCenterText("人员分布");
  97.         pieChart.setCenterTextColor(Color.GRAY);
  98.         pieChart.setCenterTextTypeface(mTf);
  100.         pieChart.setData(pieData);
  102.         Legend mLegend = pieChart.getLegend(); //设置比例图
  103.         mLegend.setPosition(Legend.LegendPosition.RIGHT_OF_CHART); //坐右边显示
  104.         mLegend.setXEntrySpace(10f);
  105.         mLegend.setYEntrySpace(5f);
  106.         mLegend.setTypeface(mTf);
  107.         mLegend.setTextColor(Color.GRAY);
  109.         pieChart.animateXY(1000, 1000);
  110.     }
  112.     private PieData getPieData(int count, float range) {
  113.         ArrayList<String> xValues = new ArrayList<String>(); //用来表示每个饼块上的内容
  114.         String[]  content = new String[] {
  115.    "<10", "10~20", "21~40", ">40"};
  116.         for (int i = 0; i < count; i++) {
  118.             xValues.add("年龄("+content[i]+")");
  119.         }
  121.         ArrayList<Entry> yValue = new ArrayList<Entry>(); //用来表示封装每个饼块的实际数据
  123.         List<Float> qs = new ArrayList<Float>();
  124.         qs.add(14f); qs.add(14f);qs.add(34f);qs.add(38f);
  125.         for (int i = 0; i < qs.size(); i++) {
  127.             yValue.add(new Entry(qs.get(i), i));
  128.         }
  130.         PieDataSet pieDataSet = new PieDataSet(yValue, "2015浏览量统计");
  131.         pieDataSet.setSliceSpace(0f);
  132.         ArrayList<Integer> colors = new ArrayList<Integer>();
  133.         //饼图颜色
  134.         colors.add(Color.rgb(205, 205, 205));
  135.         colors.add(Color.rgb(114, 188, 223));
  136.         colors.add(Color.rgb(255, 123, 124));
  137.         colors.add(Color.rgb(57, 135, 200));
  138.         pieDataSet.setColors(colors); //设置颜色
  139.         pieDataSet.setValueTextSize(8f);
  140.         pieDataSet.setValueTextColor(Color.WHITE);
  141.         pieDataSet.setValueTypeface(mTf); //设置字体样式
  142.         DisplayMetrics metrics = getResources().getDisplayMetrics();
  143.         float px = 5 * (metrics.densityDpi / 160f);
  144.         pieDataSet.setSelectionShift(px); //选中态多出的长度
  145.         PieData pieData = new PieData(xValues, pieDataSet);
  146.         return pieData;
  147.     }
  149.     private void drawTheChartByMPAndroid() {
  150.         mLineChart = (LineChart) findViewById(R.id.spread_line_chart);
  151.         LineData lineData = getLineData(36, 1000);
  152.         showChart(mLineChart, lineData, Color.rgb(137, 230, 81));
  153.     }
  155.     private void showChart(LineChart lineChart, LineData lineData, int color) {
  156.         lineChart.setDrawBorders(false); //在折线图上添加边框
  157.         lineChart.setDescription(""); //数据描述
  158.         lineChart.setNoDataTextDescription("You need to provide data for the chart.");
  160.         lineChart.setDrawGridBackground(false); //表格颜色
  161.         lineChart.setGridBackgroundColor(Color.WHITE & 0x70FFFFFF); //表格的颜色，设置一个透明度
  163.         lineChart.setTouchEnabled(true); //可点击
  165.         lineChart.setDragEnabled(true);  //可拖拽
  166.         lineChart.setScaleEnabled(true);  //可缩放
  168.         lineChart.setPinchZoom(false);
  170.         lineChart.setBackgroundColor(color); //设置背景颜色
  172.         lineChart.setData(lineData);  //填充数据
  174.         Legend mLegend = lineChart.getLegend(); //设置标示，就是那个一组y的value的
  176.         mLegend.setForm(Legend.LegendForm.CIRCLE); //样式
  177.         mLegend.setFormSize(6f); //字体
  178.         mLegend.setTextColor(Color.WHITE); //颜色
  180.         lineChart.setVisibleXRange(1, 7);   //x轴可显示的坐标范围
  181.         XAxis xAxis = lineChart.getXAxis();  //x轴的标示
  182.         xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //x轴位置
  183.         xAxis.setTextColor(Color.WHITE);    //字体的颜色
  184.         xAxis.setTextSize(10f); //字体大小
  185.         xAxis.setGridColor(Color.WHITE);//网格线颜色
  186.         xAxis.setDrawGridLines(false); //不显示网格线
  187.         xAxis.setTypeface(mTf);
  189.         YAxis axisLeft = lineChart.getAxisLeft(); //y轴左边标示
  190.         YAxis axisRight = lineChart.getAxisRight(); //y轴右边标示
  191.         axisLeft.setTextColor(Color.WHITE); //字体颜色
  192.         axisLeft.setTextSize(10f); //字体大小
  193.         axisLeft.setAxisMaxValue(1000f); //最大值
  194.         axisLeft.setLabelCount(6, true); //显示格数
  195.         axisLeft.setGridColor(Color.WHITE); //网格线颜色
  196.         axisLeft.setTypeface(mTf);
  198.         axisRight.setDrawAxisLine(false);
  199.         axisRight.setDrawGridLines(false);
  200.         axisRight.setDrawLabels(false);
  202.         lineChart.animateX(2500);  //立即执行动画
  203.     }
  205.     private LineData getLineData(int count, float range) {
  206.         ArrayList<String> xValues = new ArrayList<String>();
  207.         for (int i = 0; i < count; i++) {
  209.             // x轴显示的数据，这里默认使用数字下标显示
  210.             xValues.add("" + (i+1));
  211.         }
  213.         // y轴的数据
  214.         ArrayList<Entry> yValues = new ArrayList<Entry>();
  215.         for (int i = 0; i < count; i++) {
  217.             float value = (int) (Math.random() * range);
  218.             yValues.add(new Entry(value, i));
  219.         }
  220.         // create a dataset and give it a type
  221.         // y轴的数据集合
  222.         LineDataSet lineDataSet = new LineDataSet(yValues, "访问量统计");
  223.         // mLineDataSet.setFillAlpha(110);
  224.         // mLineDataSet.setFillColor(Color.RED);
  226.         //用y轴的集合来设置参数
  227.         lineDataSet.setLineWidth(1.75f); // 线宽
  228.         lineDataSet.setCircleSize(3f);// 显示的圆形大小
  229.         lineDataSet.setColor(Color.WHITE);// 显示颜色
  230.         lineDataSet.setCircleColor(Color.WHITE);// 圆形的颜色
  231.         lineDataSet.setHighLightColor(Color.WHITE); // 高亮的线的颜色
  232.         lineDataSet.setHighlightEnabled(true);
  233.         lineDataSet.setValueTextColor(Color.WHITE); //数值显示的颜色
  234.         lineDataSet.setValueTextSize(8f);     //数值显示的大小
  235.         lineDataSet.setValueTypeface(mTf);
  237.         ArrayList<LineDataSet> lineDataSets = new ArrayList<LineDataSet>();
  238.         lineDataSets.add(lineDataSet); // 添加数据集合
  240.         //创建lineData
  241.         LineData lineData = new LineData(xValues, lineDataSets);
  242.         return lineData;
  243.     }
  245.     public void drawTheChart() {
  246.         XYMultipleSeriesRenderer mRenderer = getXYMulSeriesRenderer();
  248.         XYSeriesRenderer renderer = getXYSeriesRenderer();
  250.         mRenderer.addSeriesRenderer(renderer);
  252.         setLists();
  254.         XYMultipleSeriesDataset dataset = getDataSet();
  256.         GraphicalView chartView = ChartFactory.getLineChartView(this, dataset, mRenderer);
  258.         chartLyt.addView(chartView, 0);
  259.         //chartLyt.invalidate();
  260.     }
  262.     public XYSeriesRenderer getXYSeriesRenderer() {
  263.         XYSeriesRenderer renderer = new XYSeriesRenderer();
  264.         //设置折线宽度
  265.         renderer.setLineWidth(2);
  266.         //设置折线颜色
  267.         renderer.setColor(Color.GRAY);
  268.         renderer.setDisplayBoundingPoints(true);
  269.         //点的样式
  270.         renderer.setPointStyle(PointStyle.CIRCLE);
  271.         //设置点的大小
  272.         renderer.setPointStrokeWidth(3);
  273.         //设置数值显示的字体大小
  274.         renderer.setChartValuesTextSize(30);
  275.         //显示数值
  276.         renderer.setDisplayChartValues(true);
  277.         return renderer;
  278.     }
  280.     public XYMultipleSeriesDataset getDataSet() {
  281.         XYMultipleSeriesDataset barDataset = new XYMultipleSeriesDataset();
  282.         CategorySeries barSeries = new CategorySeries("2016年");
  284.         for (int i = 0; i < lists.size(); i++) {
  286.             barSeries.add(lists.get(i));
  287.         }
  289.         barDataset.addSeries(barSeries.toXYSeries());
  290.         return barDataset;
  291.     }
  293.     public XYMultipleSeriesRenderer getXYMulSeriesRenderer() {
  294.         XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
  295.         renderer.setMarginsColor(Color.argb(0x00, 0xF3, 0xF3, 0xF3));
  297.         // 设置背景颜色
  298.         renderer.setApplyBackgroundColor(true);
  299.         renderer.setBackgroundColor(Color.WHITE);
  301.         //设置Title的内容和大小
  302.         renderer.setChartTitle("访问量统计");
  303.         renderer.setChartTitleTextSize(50);
  305.         //图表与四周的边距
  306.         renderer.setMargins(new int[]{
  307.    80, 80, 50, 50});
  309.         //设置X,Y轴title的内容和大小
  310.         renderer.setXTitle("日期");
  311.         renderer.setYTitle("访问数");
  312.         renderer.setAxisTitleTextSize(30);
  313.         //renderer.setAxesColor(Color.WHITE);
  314.         renderer.setLabelsColor(Color.BLACK);
  316.         //图例文字的大小
  317.         renderer.setLegendTextSize(20);
  319.         // x、y轴上刻度颜色和大小
  320.         renderer.setXLabelsColor(Color.BLACK);
  321.         renderer.setYLabelsColor(0, Color.BLACK);
  322.         renderer.setLabelsTextSize(20);
  323.         renderer.setYLabelsPadding(30);
  325.         // 设置X轴的最小数字和最大数字，由于我们的数据是从1开始，所以设置为0.5就可以在1之前让出一部分
  326.         // 有兴趣的童鞋可以删除下面两行代码看一下效果
  327.         renderer.setPanEnabled(false, false);
  329.         //显示网格
  330.         renderer.setShowGrid(true);
  332.         //X,Y轴上的数字数量
  333.         renderer.setXLabels(10);
  334.         renderer.setYLabels(10);
  336.         // 设置X轴的最小数字和最大数字
  337.         renderer.setXAxisMin(1);
  338.         renderer.setXAxisMax(20);
  339.         // 设置Y轴的最小数字和最大数字
  340.         renderer.setYAxisMin(0);
  341.         renderer.setYAxisMax(100);
  343.         // 设置渲染器显示缩放按钮
  344.         renderer.setZoomButtonsVisible(true);
  345.         // 设置渲染器允许放大缩小
  346.         renderer.setZoomEnabled(true);
  347.         // 消除锯齿
  348.         renderer.setAntialiasing(true);
  350.         // 刻度线与X轴坐标文字左侧对齐
  351.         renderer.setXLabelsAlign(Paint.Align.LEFT);
  352.         // Y轴与Y轴坐标文字左对齐
  353.         renderer.setYLabelsAlign(Paint.Align.LEFT);
  355.         // 允许左右拖动,但不允许上下拖动.
  356.         renderer.setPanEnabled(true, false);
  358.         return renderer;
  359.     }
  361.     @Override
  362.     public void onClick(View view) {
  363.         super.onClick(view);
  364.         switch (view.getId()) {
  365.             case R.id.getData:
  366.                 drawTheChart();
  367.                 drawTheChartByMPAndroid();
  368.                 drawPieChart();
  369.                 break;
  370.             default:
  371.                 break;
  372.         }
  373.     }
  374. }

  这里主要是介绍了chart的简单使用，具体得看需求再进行修改了，个人还是比较喜欢MPAndroidChart，不管是显示的效果还是使用的方便。

发表评论

表情：
评论列表 （有 0 条评论，470人围观）

还没有评论，来说两句吧...

相关阅读

    相关 springcloud之初体验

    前面几篇博客中我们大概讲解了一下spring boot的知识，话说管理这些微服务的架构就构成了spring cloud，我们一样，先不说原理先搭建出来再说； 我们今天主要搭

    傷城~傷城~/ 0 赞/ 369 阅读

    相关 【YOLO学习笔记】之YOLO初体验

    前言 因为要完成毕业论文，所以最近正在学习计算机视觉，如果大家有什么问题，都可以跟我沟通交流。除了通过博客交流外，欢迎你加入我的QQ群，一起交流有关于机器学习、深度学习、

    向右看齐向右看齐/ 0 赞/ 640 阅读