Android图表超简单实现柱状图、折线图、饼状图(基于MpAndroidChart)
来源:互联网 发布:达尔文的资料知和名言 编辑:程序博客网 时间:2024/05/17 02:03
本文基于MpAndroidChart实现各种图标,目的是让同学们快速实现图标效果
实现效果:
柱状图
折线图
饼状图
实现步骤:
1.导入
先从git上克隆下来,下载之后将jar包考到自己的工程
git地址
我用的是mpandroidchartlibrary-2-2-2.jar
2.柱状图实现
柱状图实现核心类:BarChart(用于显示柱状图)、BarData (用于设置数据和样式)
xml文件
<?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"> <com.github.mikephil.charting.charts.BarChart android:id="@+id/bar_chart" android:layout_width="match_parent" android:layout_height="match_parent"></com.github.mikephil.charting.charts.BarChart></LinearLayout>
Activity文件
import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.Toast;import com.github.mikephil.charting.charts.BarChart;import com.github.mikephil.charting.data.BarData;import com.github.mikephil.charting.data.BarDataSet;import com.github.mikephil.charting.data.BarEntry;import com.github.mikephil.charting.data.Entry;import com.github.mikephil.charting.highlight.Highlight;import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;import com.github.mikephil.charting.listener.OnChartValueSelectedListener;import com.github.mikephil.charting.utils.ColorTemplate;import java.util.ArrayList;public class ZhuzhuangtuActivity extends AppCompatActivity { //显示的图表 public BarChart barChart; //保存数据的实体(下面定义了两组数据集合) public ArrayList<BarEntry> entries = new ArrayList<BarEntry>(); public ArrayList<BarEntry> entries1 = new ArrayList<>(); //数据的集合(每组数据都需要一个数据集合存放数据实体和该组的样式) public BarDataSet dataset; public BarDataSet dataset1; //表格下方的文字 public ArrayList<String> labels = new ArrayList<String>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_zhuzhuangtu); barChart = (BarChart) findViewById(R.id.bar_chart); entries.add(new BarEntry(4f, 0)); entries.add(new BarEntry(8f, 1)); entries.add(new BarEntry(6f, 2)); entries.add(new BarEntry(12f, 3)); entries.add(new BarEntry(18f, 4)); entries.add(new BarEntry(9f, 5)); entries1.add(new BarEntry(4f, 0)); entries1.add(new BarEntry(8f, 1)); entries1.add(new BarEntry(6f, 2)); //设置数据组的数据 dataSet1 = new BarDataSet(entries1, "第二组数据"); //设置数据组的样式(参数是显示颜色的数组) dataSet1.setColors(ColorTemplate.PASTEL_COLORS); //设置柱状图上方显示数据字体大小 dataSet1.setValueTextSize(14); labels.add("一月"); labels.add("二月"); labels.add("三月"); labels.add("四月"); labels.add("五月"); labels.add("六月"); dataset = new BarDataSet(entries, "第一组数据"); dataset.setColors(ColorTemplate.COLORFUL_COLORS); ArrayList<IBarDataSet> dataSets = new ArrayList<>(); dataSets.add(dataset); dataSets.add(dataSet1); BarData data = new BarData(labels, dataSets); barChart.setData(data); //设置单个点击事件 barChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() { @Override public void onValueSelected(Entry entry, int i, Highlight highlight) { Toast.makeText(getApplicationContext(),entry.getVal()+"",Toast.LENGTH_LONG).show(); } @Override public void onNothingSelected() { } }); //设置显示动画效果 barChart.animateY(2000); //设置图标右下放显示文字 barChart.setDescription("MPandroidChart Test"); }}
3.折线图实现
xml文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <com.github.mikephil.charting.charts.LineChart android:id="@+id/spread_line_chart" android:layout_width="match_parent" android:layout_height="fill_parent" android:layout_gravity="center_horizontal" /></RelativeLayout>
Activity文件
import android.graphics.Color;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import com.github.mikephil.charting.charts.LineChart;import com.github.mikephil.charting.components.Legend;import com.github.mikephil.charting.data.Entry;import com.github.mikephil.charting.data.LineData;import com.github.mikephil.charting.data.LineDataSet;import java.util.ArrayList;public class ZhexiantuActivity extends AppCompatActivity { public LineChart lineChart; public ArrayList<String> x = new ArrayList<String>(); public ArrayList<Entry> y = new ArrayList<Entry>(); public ArrayList<LineDataSet> lineDataSets = new ArrayList<LineDataSet>(); public LineData lineData = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_zhexiantu); lineChart = (LineChart)findViewById(R.id.spread_line_chart); getLineData(100, 100); showChart(); } /** * 初始化数据 * count 表示坐标点个数,range表示等下y值生成的范围 */ public LineData getLineData(int count, float range) { for (int i = 0; i < count; i++) { //X轴显示的数据 x.add(i + ""); } for (int i = 0; i < count; i++) {//y轴的数据 float result = (float) (Math.random() * range) + 3; y.add(new Entry(result, i)); } LineDataSet lineDataSet = new LineDataSet(y, "随机产生的折线图");//y轴数据集合 lineDataSet.setLineWidth(1f);//线宽 lineDataSet.setCircleSize(Color.BLUE);//圆形颜色 lineDataSet.setCircleSize(2f);//现实圆形大小 lineDataSet.setColor(Color.RED);//现实颜色 lineDataSet.setHighLightColor(Color.BLACK);//高度线的颜色 lineDataSets.add(lineDataSet); lineData = new LineData(x,lineDataSet); return lineData; } /** * 设置样式 */ public void showChart() { lineChart.setDrawBorders(false);//是否添加边框 lineChart.setDescription("随机生成的数据");//数据描述 lineChart.setNoDataTextDescription("我需要数据");//没数据显示 lineChart.setDrawGridBackground(true);//是否显示表格颜色 lineChart.setBackgroundColor(Color.GRAY);//背景颜色 lineChart.setData(lineData);//设置数据 Legend legend = lineChart.getLegend();//设置比例图片标示,就是那一组Y的value legend.setForm(Legend.LegendForm.SQUARE);//样式 legend.setFormSize(10f);//字体 legend.setTextColor(Color.BLUE);//设置颜色 lineChart.animateX(2000);//X轴的动画 }}
4.饼状图实现
xml文件
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <com.github.mikephil.charting.charts.PieChart android:id="@+id/pie_chart" android:layout_width="match_parent" android:layout_height="fill_parent" android:layout_gravity="center_horizontal" /></RelativeLayout>
Activity文件
import android.graphics.Color;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.util.DisplayMetrics;import com.github.mikephil.charting.charts.PieChart;import com.github.mikephil.charting.components.Legend;import com.github.mikephil.charting.data.Entry;import com.github.mikephil.charting.data.PieData;import com.github.mikephil.charting.data.PieDataSet;import java.util.ArrayList;public class BingzhuangtuActivity extends AppCompatActivity { public PieChart mChart; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bingzhuangtu); mChart = (PieChart) findViewById(R.id.pie_chart); PieData mPieData = getPieData(4, 100); showChart(mChart, mPieData); } private void showChart(PieChart pieChart, PieData pieData) { pieChart.setHoleColor(Color.TRANSPARENT); pieChart.setHoleRadius(60f); //半径 pieChart.setTransparentCircleRadius(64f); // 半透明圈 //pieChart.setHoleRadius(0) //实心圆 pieChart.setDescription("测试饼状图"); // mChart.setDrawYValues(true); pieChart.setDrawCenterText(true); //饼状图中间可以添加文字 pieChart.setDrawHoleEnabled(true); pieChart.setRotationAngle(90); // 初始旋转角度 pieChart.setCenterTextSize(20); pieChart.setDescriptionTextSize(20); // draws the corresponding description value into the slice // mChart.setDrawXValues(true); // enable rotation of the chart by touch pieChart.setRotationEnabled(true); // 可以手动旋转 // display percentage values pieChart.setUsePercentValues(true); //显示成百分比 // mChart.setUnit(" €"); // mChart.setDrawUnitsInChart(true); // add a selection listener// mChart.setOnChartValueSelectedListener(this); // mChart.setTouchEnabled(false);// mChart.setOnAnimationListener(this); pieChart.setCenterText("Quarterly Revenue"); //饼状图中间的文字// pieChart.animateY(3000); //设置数据 pieChart.setData(pieData); // undo all highlights// pieChart.highlightValues(null);// pieChart.invalidate(); Legend mLegend = pieChart.getLegend(); //设置比例图 mLegend.setPosition(Legend.LegendPosition.RIGHT_OF_CHART); //最右边显示// mLegend.setForm(LegendForm.LINE); //设置比例图的形状,默认是方形 mLegend.setXEntrySpace(7f);//设置距离饼图的距离,防止与饼图重合 mLegend.setYEntrySpace(5f); pieChart.animateXY(1000, 1000); //设置动画 // mChart.spin(2000, 0, 360); } /** * @param count 分成几部分 * @param range */ private PieData getPieData(int count, float range) { ArrayList<String> xValues = new ArrayList<String>(); //xVals用来表示每个饼块上的内容 for (int i = 0; i < count; i++) { xValues.add("Quarterly" + (i + 1)); //饼块上显示成Quarterly1, Quarterly2, Quarterly3, Quarterly4 } ArrayList<Entry> yValues = new ArrayList<Entry>(); //yVals用来表示封装每个饼块的实际数据 // 饼图数据 /** * 将一个饼形图分成四部分, 四部分的数值比例为14:14:34:38 * 所以 14代表的百分比就是14% */ float quarterly1 = 14; float quarterly2 = 14; float quarterly3 = 34; float quarterly4 = 38; yValues.add(new Entry(quarterly1, 0)); yValues.add(new Entry(quarterly2, 1)); yValues.add(new Entry(quarterly3, 2)); yValues.add(new Entry(quarterly4, 3)); //y轴的集合 PieDataSet pieDataSet = new PieDataSet(yValues, "Quarterly Revenue 2014"/*显示在比例图上*/); pieDataSet.setSliceSpace(0f); //设置个饼状图之间的距离 ArrayList<Integer> colors = new ArrayList<Integer>(); // 饼图颜色 colors.add(Color.rgb(205, 205, 205)); colors.add(Color.rgb(114, 188, 223)); colors.add(Color.rgb(255, 123, 124)); colors.add(Color.rgb(57, 135, 200)); pieDataSet.setColors(colors); DisplayMetrics metrics = getResources().getDisplayMetrics(); float px = 5 * (metrics.densityDpi / 160f); pieDataSet.setSelectionShift(px); // 选中态多出的长度 PieData pieData = new PieData(xValues, pieDataSet); return pieData; }}
0 0
- Android图表超简单实现柱状图、折线图、饼状图(基于MpAndroidChart)
- Android图表超简单实现柱状图、折线图、饼状图(基于MpAndroidChart)
- Android图表 MPAndroidChart折线图
- Android图表 MPAndroidChart折线图
- Android数据统计柱状图、折线图 MPAndroidChart
- MPAndroidChart 图表柱状图,折线图,和组合图
- MPAndroidChart开源图表库,柱状图和折线图CombinedChart
- MPAndroidChart绘制折线图柱状图混合图表练习
- MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图
- android柱状图和饼状图的简单使用(MPAndroidChart)
- Android之MPAndroidChart库使用说明(柱状图、折线图、饼图和组合图.)
- Android图表库MPAndroidChart(六)饼状图 -折线百分比
- android使用MPAndroidChart开源图表折线图
- Android自定义View实现简单的折线图、柱状图
- android 开源图表库MPChart最简单使用方法示例教程Demo--折线图 柱状图
- ExtJS6图表简单demo(折线图,散点图,柱状图)
- Echarts 绘制简单的图表柱状图、折线图
- MPAndroidChart开源图表库(二)之折线图
- 数据库常见索引解析(B树,B-树,B+树,B*树,位图索引,Hash索引)
- 第十四周OJ(4)求3x3矩阵对角线元素之和
- How to extract data from XML nodes in Scala
- 解决使用spread时快捷键无反应的情况
- Fiddler抓取https包设置
- Android图表超简单实现柱状图、折线图、饼状图(基于MpAndroidChart)
- spring applicationContext.xml 配置文件 详解
- oracle 锁表后,如何定位,并解锁
- web前端开发中浏览器兼容问题(五)
- php标准注释
- Android图片中的三级缓存
- 自定义标签
- C++四种智能指针小结
- 测试工作中遇到的英文缩写解释(持续更新)