设为首页收藏本站
开启辅助访问

在路上

 找回密码
 立即注册
在路上 › 站点首页 ›学习 › 查看内容

MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图

2016-8-29 13:10| 发布者: zhangjf| 查看: 930| 评论: 0

摘要: MPAndroidChart开源图表库之饼状图 　　为大家介绍一款图标开源库MPAndroidChart,它不仅可以在Android设备上绘制各种统计图表，而且可以对图表进行拖动和缩放操作，用起来非常灵活。MPAndroidChart同样拥有常用的图 ...

MPAndroidChart开源图表库之饼状图

　　为大家介绍一款图标开源库MPAndroidChart,它不仅可以在Android设备上绘制各种统计图表，而且可以对图表进行拖动和缩放操作，用起来非常灵活。MPAndroidChart同样拥有常用的图表类型：线型图、饼图、柱状图和散点图。

mpandroidchartlibrary.jar包下载地址：

https://github.com/PhilJay/MPAndroidChart/releases

　　下面主要实现以下饼状图：

　　1.从上面的地址中下载最新mpandroidchartlibrary-2-0-8.jar包， 然后copy到项目的libs中

　　2. 定义xml文件

3. 主要Java逻辑代码如下。

  2. importjava.util.ArrayList;
  3. importcom.github.mikephil.charting.charts.PieChart;
  4. importcom.github.mikephil.charting.components.Legend;
  5. importcom.github.mikephil.charting.components.Legend.LegendPosition;
  6. importcom.github.mikephil.charting.data.Entry;
  7. importcom.github.mikephil.charting.data.PieData;
  8. importcom.github.mikephil.charting.data.PieDataSet;
  9. import android.support.v7.app.ActionBarActivity;
  10. importandroid.graphics.Color;
  11. importandroid.os.Bundle;
  12. importandroid.util.DisplayMetrics;
  13. public class MainActivity extends ActionBarActivity {
  14. privatePieChartmChart;
  15. @Override
  16. protected void onCreate(Bundle savedInstanceState) {
  17. super.onCreate(savedInstanceState);
  18. setContentView(R.layout.activity_main);
  19. mChart = (PieChart) findViewById(R.id.spread_pie_chart);
  20. PieDatamPieData = getPieData(4, 100);
  21. showChart(mChart, mPieData);
  22. }
  23. private void showChart(PieChartpieChart, PieDatapieData) {
  24. pieChart.setHoleColorTransparent(true);
  25. pieChart.setHoleRadius(60f); //半径
  26. pieChart.setTransparentCircleRadius(64f); // 半透明圈
  27. //pieChart.setHoleRadius(0) //实心圆
  28. pieChart.setDescription("测试饼状图");
  29. // mChart.setDrawYValues(true);
  30. pieChart.setDrawCenterText(true); //饼状图中间可以添加文字
  31. pieChart.setDrawHoleEnabled(true);
  32. pieChart.setRotationAngle(90); // 初始旋转角度
  33. // draws the corresponding description value into the slice
  34. // mChart.setDrawXValues(true);
  35. // enable rotation of the chart by touch
  36. pieChart.setRotationEnabled(true); // 可以手动旋转
  37. // display percentage values
  38. pieChart.setUsePercentValues(true); //显示成百分比
  39. // mChart.setUnit(" ?");
  40. // mChart.setDrawUnitsInChart(true);
  41. // add a selection listener
  42. // mChart.setOnChartValueSelectedListener(this);
  43. // mChart.setTouchEnabled(false);
  44. // mChart.setOnAnimationListener(this);
  45. pieChart.setCenterText("Quarterly Revenue"); //饼状图中间的文字
  46. //设置数据
  47. pieChart.setData(pieData);
  48. // undo all highlights
  49. // pieChart.highlightValues(null);
  50. // pieChart.invalidate();
  51. Legend mLegend = pieChart.getLegend(); //设置比例图
  52. mLegend.setPosition(LegendPosition.RIGHT_OF_CHART); //最右边显示
  53. // mLegend.setForm(LegendForm.LINE); //设置比例图的形状，默认是方形
  54. mLegend.setXEntrySpace(7f);
  55. mLegend.setYEntrySpace(5f);
  56. pieChart.animateXY(1000, 1000); //设置动画
  57. // mChart.spin(2000, 0, 360);
  58. }
  59. /**
  60. *
  61. * @param count 分成几部分
  62. * @param range
  63. */
  64. privatePieDatagetPieData(int count, float range) {
  65. ArrayList<String>xValues = new ArrayList<String>(); //xVals用来表示每个饼块上的内容
  66. for (inti = 0; i< count; i++) {
  67. xValues.add("Quarterly" + (i + 1)); //饼块上显示成Quarterly1, Quarterly2, Quarterly3, Quarterly4
  68. }
  69. ArrayList<Entry>yValues = new ArrayList<Entry>(); //yVals用来表示封装每个饼块的实际数据
  70. // 饼图数据
  71. /**
  72. * 将一个饼形图分成四部分，四部分的数值比例为14:14:34:38
  73. * 所以 14代表的百分比就是14%
  74. */
  75. float quarterly1 = 14;
  76. float quarterly2 = 14;
  77. float quarterly3 = 34;
  78. float quarterly4 = 38;
  79. yValues.add(new Entry(quarterly1, 0));
  80. yValues.add(new Entry(quarterly2, 1));
  81. yValues.add(new Entry(quarterly3, 2));
  82. yValues.add(new Entry(quarterly4, 3));
  83. //y轴的集合
  84. PieDataSetpieDataSet = new PieDataSet(yValues, "Quarterly Revenue 2014"/*显示在比例图上*/);
  85. pieDataSet.setSliceSpace(0f); //设置个饼状图之间的距离
  86. ArrayList<Integer> colors = new ArrayList<Integer>();
  87. // 饼图颜色
  88. colors.add(Color.rgb(205, 205, 205));
  89. colors.add(Color.rgb(114, 188, 223));
  90. colors.add(Color.rgb(255, 123, 124));
  91. colors.add(Color.rgb(57, 135, 200));
  92. pieDataSet.setColors(colors);
  93. DisplayMetrics metrics = getResources().getDisplayMetrics();
  94. floatpx = 5 * (metrics.densityDpi / 160f);
  95. pieDataSet.setSelectionShift(px); // 选中态多出的长度
  96. PieDatapieData = new PieData(xValues, pieDataSet);
  97. returnpieData;
  98. }
  99. }
复制代码

效果图如下：


MPAndroidChart开源图表库之折线图

1. 将mpandroidchartlibrary-2-0-8.jar包copy到项目的libs中

2. 定义xml文件

3. 主要Java逻辑代码如下。

  2. packagecom.example.mpandroidlinechart;
  3. importjava.util.ArrayList;
  4. importcom.github.mikephil.charting.charts.LineChart;
  5. importcom.github.mikephil.charting.components.Legend;
  6. importcom.github.mikephil.charting.components.Legend.LegendForm;
  7. importcom.github.mikephil.charting.data.Entry;
  8. importcom.github.mikephil.charting.data.LineData;
  9. importcom.github.mikephil.charting.data.LineDataSet;
  10. import android.support.v7.app.ActionBarActivity;
  11. importandroid.graphics.Color;
  12. importandroid.os.Bundle;
  13. public class MainActivity extends ActionBarActivity {
  14. privateLineChartmLineChart;
  15. // private Typeface mTf;
  16. @Override
  17. protected void onCreate(Bundle savedInstanceState) {
  18. super.onCreate(savedInstanceState);
  19. setContentView(R.layout.activity_main);
  20. mLineChart = (LineChart) findViewById(R.id.spread_line_chart);
  21. // mTf = Typeface.createFromAsset(getAssets(), "OpenSans-Bold.ttf");
  22. LineDatamLineData = getLineData(36, 100);
  23. showChart(mLineChart, mLineData, Color.rgb(114, 188, 223));
  24. }
  25. // 设置显示的样式
  26. private void showChart(LineChartlineChart, LineDatalineData, int color) {
  27. lineChart.setDrawBorders(false); //是否在折线图上添加边框
  28. // no description text
  29. lineChart.setDescription("");// 数据描述
  30. // 如果没有数据的时候，会显示这个，类似listview的emtpyview
  31. lineChart.setNoDataTextDescription("You need to provide data for the chart.");
  32. // enable / disable grid background
  33. lineChart.setDrawGridBackground(false); // 是否显示表格颜色
  34. lineChart.setGridBackgroundColor(Color.WHITE& 0x70FFFFFF); // 表格的的颜色，在这里是是给颜色设置一个透明度
  35. // enable touch gestures
  36. lineChart.setTouchEnabled(true); // 设置是否可以触摸
  37. // enable scaling and dragging
  38. lineChart.setDragEnabled(true);// 是否可以拖拽
  39. lineChart.setScaleEnabled(true);// 是否可以缩放
  40. // if disabled, scaling can be done on x- and y-axis separately
  41. lineChart.setPinchZoom(false);//
  42. lineChart.setBackgroundColor(color);// 设置背景
  43. // add data
  44. lineChart.setData(lineData); // 设置数据
  45. // get the legend (only possible after setting data)
  46. Legend mLegend = lineChart.getLegend(); // 设置比例图标示，就是那个一组y的value的
  47. // modify the legend ...
  48. // mLegend.setPosition(LegendPosition.LEFT_OF_CHART);
  49. mLegend.setForm(LegendForm.CIRCLE);// 样式
  50. mLegend.setFormSize(6f);// 字体
  51. mLegend.setTextColor(Color.WHITE);// 颜色
  52. // mLegend.setTypeface(mTf);// 字体
  53. lineChart.animateX(2500); // 立即执行的动画,x轴
  54. }
  55. /**
  56. * 生成一个数据
  57. * @param count 表示图表中有多少个坐标点
  58. * @param range 用来生成range以内的随机数
  59. * @return
  60. */
  61. privateLineDatagetLineData(int count, float range) {
  62. ArrayList<String>xValues = new ArrayList<String>();
  63. for (inti = 0; i< count; i++) {
  64. // x轴显示的数据，这里默认使用数字下标显示
  65. xValues.add("" + i);
  66. }
  67. // y轴的数据
  68. ArrayList<Entry>yValues = new ArrayList<Entry>();
  69. for (inti = 0; i< count; i++) {
  70. float value = (float) (Math.random() * range) + 3;
  71. yValues.add(new Entry(value, i));
  72. }
  73. // create a dataset and give it a type
  74. // y轴的数据集合
  75. LineDataSetlineDataSet = new LineDataSet(yValues, "测试折线图" /*显示在比例图上*/);
  76. // mLineDataSet.setFillAlpha(110);
  77. // mLineDataSet.setFillColor(Color.RED);
  78. //用y轴的集合来设置参数
  79. lineDataSet.setLineWidth(1.75f); // 线宽
  80. lineDataSet.setCircleSize(3f);// 显示的圆形大小
  81. lineDataSet.setColor(Color.WHITE);// 显示颜色
  82. lineDataSet.setCircleColor(Color.WHITE);// 圆形的颜色
  83. lineDataSet.setHighLightColor(Color.WHITE); // 高亮的线的颜色
  84. ArrayList<LineDataSet>lineDataSets = new ArrayList<LineDataSet>();
  85. lineDataSets.add(lineDataSet); // add the datasets
  86. // create a data object with the datasets
  87. LineDatalineData = new LineData(xValues, lineDataSets);
  88. returnlineData;
  89. }
  90. }
复制代码

效果图如下：

MPAndroidChart开源图表库之柱状图

1. 将mpandroidchartlibrary-2-0-8.jar包copy到项目的libs中

2. 定义xml文件

3. 主要Java逻辑代码如下。

  2. packagecom.jackie.mpandoidbarchart;
  3. importjava.util.ArrayList;
  4. importcom.github.mikephil.charting.charts.BarChart;
  5. importcom.github.mikephil.charting.charts.LineChart;
  6. importcom.github.mikephil.charting.components.Legend;
  7. importcom.github.mikephil.charting.components.Legend.LegendForm;
  8. importcom.github.mikephil.charting.components.XAxis;
  9. importcom.github.mikephil.charting.components.XAxis.XAxisPosition;
  10. importcom.github.mikephil.charting.data.BarData;
  11. importcom.github.mikephil.charting.data.BarDataSet;
  12. importcom.github.mikephil.charting.data.BarEntry;
  13. import android.support.v7.app.ActionBarActivity;
  14. importandroid.graphics.Color;
  15. importandroid.os.Bundle;
  16. public class MainActivity extends ActionBarActivity {
  17. privateBarChartmBarChart;
  18. privateBarDatamBarData;
  19. @Override
  20. protected void onCreate(Bundle savedInstanceState) {
  21. super.onCreate(savedInstanceState);
  22. setContentView(R.layout.activity_main);
  23. mBarChart = (BarChart) findViewById(R.id.spread_bar_chart);
  24. mBarData = getBarData(4, 100);
  25. showBarChart(mBarChart, mBarData);
  26. }
  27. private void showBarChart(BarChartbarChart, BarDatabarData) {
  28. barChart.setDrawBorders(false); ////是否在折线图上添加边框
  29. barChart.setDescription("");// 数据描述
  30. // 如果没有数据的时候，会显示这个，类似ListView的EmptyView
  31. barChart.setNoDataTextDescription("You need to provide data for the chart.");
  32. barChart.setDrawGridBackground(false); // 是否显示表格颜色
  33. barChart.setGridBackgroundColor(Color.WHITE& 0x70FFFFFF); // 表格的的颜色，在这里是是给颜色设置一个透明度
  34. barChart.setTouchEnabled(true); // 设置是否可以触摸
  35. barChart.setDragEnabled(true);// 是否可以拖拽
  36. barChart.setScaleEnabled(true);// 是否可以缩放
  37. barChart.setPinchZoom(false);//
  38. // barChart.setBackgroundColor();// 设置背景
  39. barChart.setDrawBarShadow(true);
  40. barChart.setData(barData); // 设置数据
  41. Legend mLegend = barChart.getLegend(); // 设置比例图标示
  42. mLegend.setForm(LegendForm.CIRCLE);// 样式
  43. mLegend.setFormSize(6f);// 字体
  44. mLegend.setTextColor(Color.BLACK);// 颜色
  45. // X轴设定
  46. // XAxisxAxis = barChart.getXAxis();
  47. // xAxis.setPosition(XAxisPosition.BOTTOM);
  48. barChart.animateX(2500); // 立即执行的动画,x轴
  49. }
  50. privateBarDatagetBarData(int count, float range) {
  51. ArrayList<String>xValues = new ArrayList<String>();
  52. for (inti = 0; i< count; i++) {
  53. xValues.add("第" + (i + 1) + "季度");
  54. }
  55. ArrayList<BarEntry>yValues = new ArrayList<BarEntry>();
  56. for (inti = 0; i< count; i++) {
  57. float value = (float) (Math.random() * range/*100以内的随机数*/) + 3;
  58. yValues.add(new BarEntry(value, i));
  59. }
  60. // y轴的数据集合
  61. BarDataSetbarDataSet = new BarDataSet(yValues, "测试饼状图");
  62. barDataSet.setColor(Color.rgb(114, 188, 223));
  63. ArrayList<BarDataSet>barDataSets = new ArrayList<BarDataSet>();
  64. barDataSets.add(barDataSet); // add the datasets
  65. BarDatabarData = new BarData(xValues, barDataSets);
  66. returnbarData;
  67. }
  68. }
  70. packagecom.jackie.mpandoidbarchart;
  71. importjava.util.ArrayList;
  72. importcom.github.mikephil.charting.charts.BarChart;
  73. importcom.github.mikephil.charting.charts.LineChart;
  74. importcom.github.mikephil.charting.components.Legend;
  75. importcom.github.mikephil.charting.components.Legend.LegendForm;
  76. importcom.github.mikephil.charting.components.XAxis;
  77. importcom.github.mikephil.charting.components.XAxis.XAxisPosition;
  78. importcom.github.mikephil.charting.data.BarData;
  79. importcom.github.mikephil.charting.data.BarDataSet;
  80. importcom.github.mikephil.charting.data.BarEntry;
  81. import android.support.v7.app.ActionBarActivity;
  82. importandroid.graphics.Color;
  83. importandroid.os.Bundle;
  84. public class MainActivity extends ActionBarActivity {
  85. privateBarChartmBarChart;
  86. privateBarDatamBarData;
  87. @Override
  88. protected void onCreate(Bundle savedInstanceState) {
  89. super.onCreate(savedInstanceState);
  90. setContentView(R.layout.activity_main);
  91. mBarChart = (BarChart) findViewById(R.id.spread_bar_chart);
  92. mBarData = getBarData(4, 100);
  93. showBarChart(mBarChart, mBarData);
  94. }
  95. private void showBarChart(BarChartbarChart, BarDatabarData) {
  96. barChart.setDrawBorders(false); ////是否在折线图上添加边框
  97. barChart.setDescription("");// 数据描述
  98. // 如果没有数据的时候，会显示这个，类似ListView的EmptyView
  99. barChart.setNoDataTextDescription("You need to provide data for the chart.");
  100. barChart.setDrawGridBackground(false); // 是否显示表格颜色
  101. barChart.setGridBackgroundColor(Color.WHITE& 0x70FFFFFF); // 表格的的颜色，在这里是是给颜色设置一个透明度
  102. barChart.setTouchEnabled(true); // 设置是否可以触摸
  103. barChart.setDragEnabled(true);// 是否可以拖拽
  104. barChart.setScaleEnabled(true);// 是否可以缩放
  105. barChart.setPinchZoom(false);//
  106. // barChart.setBackgroundColor();// 设置背景
  107. barChart.setDrawBarShadow(true);
  108. barChart.setData(barData); // 设置数据
  109. Legend mLegend = barChart.getLegend(); // 设置比例图标示
  110. mLegend.setForm(LegendForm.CIRCLE);// 样式
  111. mLegend.setFormSize(6f);// 字体
  112. mLegend.setTextColor(Color.BLACK);// 颜色
  113. // X轴设定
  114. // XAxisxAxis = barChart.getXAxis();
  115. // xAxis.setPosition(XAxisPosition.BOTTOM);
  116. barChart.animateX(2500); // 立即执行的动画,x轴
  117. }
  118. privateBarDatagetBarData(int count, float range) {
  119. ArrayList<String>xValues = new ArrayList<String>();
  120. for (inti = 0; i< count; i++) {
  121. xValues.add("第" + (i + 1) + "季度");
  122. }
  123. ArrayList<BarEntry>yValues = new ArrayList<BarEntry>();
  124. for (inti = 0; i< count; i++) {
  125. float value = (float) (Math.random() * range/*100以内的随机数*/) + 3;
  126. yValues.add(new BarEntry(value, i));
  127. }
  128. // y轴的数据集合
  129. BarDataSetbarDataSet = new BarDataSet(yValues, "测试饼状图");
  130. barDataSet.setColor(Color.rgb(114, 188, 223));
  131. ArrayList<BarDataSet>barDataSets = new ArrayList<BarDataSet>();
  132. barDataSets.add(barDataSet); // add the datasets
  133. BarDatabarData = new BarData(xValues, barDataSets);
  134. returnbarData;
  135. }
  136. }
复制代码

效果图如下：


以上所述是小编给大家介绍的MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图的相关知识，希望对大家有所帮助。

收藏 邀请
上一篇：详解Java设计模式编程中的访问者模式下一篇：JavaWeb实现文件上传与下载实例详解

最新评论

相关分类

小黑屋|在路上 ( 蜀ICP备15035742号-1 )  

;

GMT+8, 2025-5-6 16:19

Copyright 2015-2025 djqfx

返回顶部