520闷在家里做图（安卓统计图MPAndroidChart开发）

移动开发作者： 2024-08-20 01:20:01

有些时候觉得一个人挺好的，可以更自由安排自己的时间；有些时候觉得有个人挺好的，很多事情一个人做起来太没意思了，纵使心中澎湃，倾听的独有自己。废话少说，直接上图 MPAndroidChart是啥一

repositories {
    maven { url 'https://jitpack.io' }
}

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

 1 dongxiaodongchart = findViewById(R.id.chart);
 2 //触摸事件监听
 3 dongxiaodongchart.setOnChartGestureListener(new OnChartGestureListener() {
 4     开始触摸手势时回调
 5     @Override
 6     public void onChartGestureStart(MotionEvent me,ChartTouchListener.ChartGesture lastPerformedGesture) {
 7         Toast.makeText(MainActivity.this,"东小东：触摸事件开始",Toast.LENGTH_SHORT).show();
 8     }
 9     结束触摸手势时回调
10 11      onChartGestureEnd(MotionEvent me,1)">12         13 14     长按图表时回调
15 16      onChartLongPressed(MotionEvent me) {
17         Toast.makeText(MainActivity.this,"东小东：图表长按",Toast.LENGTH_SHORT).show();
18 19     双击图表时回调
20 21      onChartDoubleTapped(MotionEvent me) {
22         Toast.makeText(MainActivity.23 24     单击图表时进行回调
25 26      onChartSingleTapped(MotionEvent me) {
27         Toast.makeText(MainActivity.28 29     图幅描述变化
30     /*参数：
31     x的速度
32     y的速度
33      */
34 35     void onChartFling(MotionEvent me1,MotionEvent me2,float velocityX,1)">float velocityY) {
36         Toast.makeText(MainActivity.37 38     缩放图表时的回调
39     40     scaleX x轴上的比例因子
41     scaleY y轴上的比例因子
42     43 44     void onChartScale(MotionEvent me,1)">float scaleX,1)"> scaleY) {
45         Toast.makeText(MainActivity.46 47     通过拖动手势移动/转换图表时的回调
48     49        dX 在x轴上的平移距离
50        dY 在y轴上的平移距离
51     52 53     void onChartTranslate(MotionEvent me,1)">float dX,1)"> dY) {
54         Toast.makeText(MainActivity.55 56 });

enum EasingOption {
      Linear,EaseInQuad,EaSEOutQuad,EaseInOutQuad,EaseInCubic,EaSEOutCubic,EaseInOutCubic,EaseInQuart,EaSEOutQuart,EaseInOutQuart,EaseInSine,EaSEOutSine,EaseInOutSine,EaseInExpo,EaSEOutExpo,EaseInOutExpo,EaseInCirc,EaSEOutCirc,EaseInOutCirc,EaseInElastic,EaSEOutElastic,EaseInOutElastic,EaseInBack,EaSEOutBack,EaseInOutBack,EaseInBounce,EaSEOutBounce,EaseInOutBounce,}

默认效果动画
dongxiaodongchart = findViewById(R.id.chart);
dongxiaodongchart.animateX(2000);
添加固定效果动画
dongxiaodongchart = findViewById(R.id.chart);
dongxiaodongchart.animateX(2000,Easing. EaseInOutQuad);

dongxiaodongchart = findViewById(R.id.chart);
XAxis xAxis = dongxiaodongchart.getXAxis();获取x轴的实例
xAxis.setLabelRotationAngle(-45);刻度旋转-45度
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);只在图表下面显示

dongxiaodongchart = findViewById(R.id.chart);
YAxis leftAxis = dongxiaodongchart.getAxisLeft();
YAxis rightAxis = dongxiaodongchart.getAxisRight();

void setData(ChartData data) { ... }

public LineDataSet(List<Entry> entries,String label) { ... }

public Entry(float x,1)">float y) { ... }

Description description = chart.getDescription();

折线图

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 1 寻找到控件
 2 LineChart dongxiaodongchart = 3 dongxiaodongchart.getAxisRight().setEnabled(false);y轴右边不显示
 4 dongxiaodongchart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);只在图表下面显示x轴
创建两个数据集
 6 List<Entry> valsComp1 = new ArrayList<Entry>();数据集1
 7 valsComp1.add(new Entry(1,2));
 8 valsComp1.add(new Entry(1.2f,3.9f 9 valsComp1.add(new Entry(2f,610 List<Entry> valsComp2 = 数据集2
11 valsComp2.add(12 valsComp2.add(new Entry(2.2f,1)">13 valsComp2.add(new Entry(3f,1)">14 创建两个线对象
15 LineDataSet setComp1 = new LineDataSet(valsComp1,"东小东1"16 LineDataSet setComp2 = new LineDataSet(valsComp2,"东小东2"17 线对象的样式（更多见：数据对象样式 ）
18 setComp1.setColor(Color.RED);设置线的颜色
19 setComp2.setCircleRadius(10);设置数据点的大小
数据显示
21 LineData data =  LineData(setComp1,setComp2);
22 dongxiaodongchart.setData(data);
23 dongxiaodongchart.invalidate();

带颜色填充的折线图

/>

19 setComp1.setDrawFilled(true20 setComp2.setDrawFilled(21 setComp2.setFillColor(Color.YELLOW);
23 LineData data = 24 25 dongxiaodongchart.invalidate();

条形图

.github.mikephil.charting.charts.BarChart
    android:id 2 BarChart dongxiaodongchart = 3 不显示描述
 4 dongxiaodongchart.getDescription().setEnabled(falsey轴右边关闭
 6 dongxiaodongchart.getAxisRight().setEnabled( 7 x轴设置无网格
 8 XAxis xAxis = dongxiaodongchart.getXAxis();
 9 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
10 xAxis.setDrawGridLines(11 xAxis.setGranularity(1f); 在放大到为轴设置的小数位数不再允许在两个轴值之间进行区分的点时，可以使用此方法来避免值重复。
12 13 List<BarEntry> valsComp1 = new ArrayList<BarEntry>();14 valsComp1.add(new BarEntry(1,1)">15 valsComp1.add(new BarEntry(3f,1)">16 valsComp1.add(new BarEntry(5f,1)">创建条形图对象
18 BarDataSet setComp1 = new BarDataSet(valsComp1,1)">19 setComp1.setColor(Color.RED);
21 BarData data =  BarData(setComp1);
22 dongxiaodongchart.setData(data);设置数据
23 dongxiaodongchart.invalidate();刷新
设置动画样式
25 dongxiaodongchart.animateY(2000,Easing. EaseInOutQuad);

分组条形图

/>

 3 
 4 设置颜色图标在右上角显示，默认是在图表底部并排显示
 5 Legend l = dongxiaodongchart.getLegend();
 6 l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
l.setOrientation(Legend.LegendOrientation.VERTICAL);
 9 l.setDrawInside(l.setYOffset(0f);
11 l.setXOffset(10f);
l.setYEntrySpace(0f);
l.setTextSize(8f);
14 
Y轴设置
16 dongxiaodongchart.getAxisRight().setEnabled(17 
X轴设置
19 XAxis xAxis = dongxiaodongchart.getXAxis();获取到x轴对象
20 xAxis.setGranularity(1f);设置网格宽度
21 xAxis.setCenterAxisLabels(true);设置为刻度显示在网格中间
22 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);只在图表下面显示
23 
24 dongxiaodongchart.getDescription().setEnabled(25 
26 float groupSpace = 0.08f;组间隔
27 float barSpace = 0.03f; 每个柱状图的间隔
float barWidth = 0.2f; 每个柱状图的宽度
29  (0.2 + 0.03) * 4 + 0.08 = 1.00 -> interval per "group"
30 
-----数据-----
int groupCount = 3;
33 int startYear = 1998int endYear = startYear + groupCount;
35 
36 ArrayList<BarEntry> values1 = new ArrayList<>();
37 ArrayList<BarEntry> values2 = 38 ArrayList<BarEntry> values3 = 39 ArrayList<BarEntry> values4 = 40 
float randomMultiplier = 6 * 1042 
for (int i = startYear; i < endYear; i++) {
44     values1.add(new BarEntry(i,(float) (Math.random() * randomMultiplier)));
45     values2.add(46     values3.add(47     values4.add(48 }
设置样式和生成柱状图对象
BarDataSet set1,set2,set3,set4;
51 set1 = new BarDataSet(values1,"东小东A"52 set1.setColor(Color.rgb(104,241,17553 set2 = new BarDataSet(values2,"东小东B"54 set2.setColor(Color.rgb(164,228,25155 set3 = new BarDataSet(values3,"东小东C"56 set3.setColor(Color.rgb(242,247,15857 set4 = new BarDataSet(values4,"东小东D"58 set4.setColor(Color.rgb(255,102,059 60 BarData data =  BarData(set1,set4);
61 62 设置柱状宽度
63 dongxiaodongchart.getBarData().setBarWidth(barWidth);
64 设置刻度最小值
65 dongxiaodongchart.getXAxis().setAxisMinimum(startYear);
66 设置刻度最大值
67 dongxiaodongchart.getXAxis().setAxisMaximum(startYear + dongxiaodongchart.getBarData().getGroupWidth(groupSpace,barSpace) * groupCount);
68 组适配
69 dongxiaodongchart.groupBars(startYear,groupSpace,barSpace);
70 dongxiaodongchart.invalidate();刷新数据
71 
72 73 dongxiaodongchart.animateY(2000,1)">积木条形图


 



 6 YAxis leftAxis = dongxiaodongchart.getAxisLeft();
 7 leftAxis.setAxisMinimum(0f);  从零开始
 8 dongxiaodongchart.getAxisRight().setEnabled(10 XAxis xAxis =12 xAxis.setDrawGridLines(13 xAxis.setGranularity(1f); 15 List<BarEntry> valsComp1 = new BarEntry(-2f,1)">new float[] { 5,4 }));
17 valsComp1.add(new BarEntry(0f,1)">float[] { 10,6,318 valsComp1.add(new BarEntry(2f,720 BarDataSet setComp1 = 21 setComp1.setDrawIcons(22 setComp1.setColors(int[]{Color.RED,Color.GREEN,Color.BLUE });
23 setComp1.setStackLabels(new String[]{"东1","东2","东3"});
24 ArrayList<IBarDataSet> dataSets = dataSets.add(setComp1);
显示
27 BarData data =  BarData(dataSets);
29 dongxiaodongchart.setFitBars(30 dongxiaodongchart.invalidate();
32 dongxiaodongchart.animateY(2000,1)">饼形图


 



.github.mikephil.charting.charts.PieChart
    android:id 2 PieChart dongxiaodongchart =圆环中间显示
 4 dongxiaodongchart.setCenterText("东小东\n主要标题" 5 dongxiaodongchart.setCenterTextSize(15边距设置
 7 dongxiaodongchart.setExtraOffsets(20.f,10.f,20.f,10f);
数据线条
dongxiaodongchart.setHoleRadius(58f);
dongxiaodongchart.setTransparentCircleRadius(61f);
颜色标识显示
12 Legend l =16 l.setDrawInside(false);添加不显示
l.setEnabled(false);
数据
19 List<PieEntry> list=20 list.add(new PieEntry(30,"东1"21 list.add(22 list.add(new PieEntry(40,1)">23 PieDataSet pieDataSet=new PieDataSet(list,"数据标题"设置样式
25 pieDataSet.setColors(Color.RED,Color.GRAY,Color.CYAN);设置各个数据的颜色
设置为值外部显示,注释则内部显示
pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
28 pieDataSet.setValueLineColor(Color.RED);值引线为红色
29 pieDataSet.setValueTextSize(30输出值
31 PieData data =  PieData(pieDataSet);
32 data.setValueTextSize(11f);显示值的大小
33 data.setValueTextColor(Color.BLUE);显示值的颜色
34 dongxiaodongchart.setData(data);35 dongxiaodongchart.invalidate();刷新

 全饼图


 



 3 dongxiaodongchart.getDescription().setText("东小东图表描述字段"外边距设置
 5 dongxiaodongchart.setExtraOffsets(20.f,1)">图例
 7 Legend l =12 List<PieEntry> list=13 list.add(new PieEntry(300,1)">14 list.add(15 list.add(new PieEntry(700,1)">16 PieDataSet pieDataSet=18 pieDataSet.setColors(Color.RED,1)">20 PieData data = 数据显示大小
22 data.setValueTextSize(11f);23 data.setValueTextColor(Color.WHITE);显示值
设置显示单位为%
25 data.setValueFormatter( PercentFormatter(dongxiaodongchart));
设置开启百分比显示
27 dongxiaodongchart.setUsePercentValues(中心圆设置
29 
31 dongxiaodongchart.setHoleRadius(1);中心圆半径为1%
32 dongxiaodongchart.setTransparentCircleRadius(0);中心半透明圆半径为0%
数据刷新显示
刷新

动态数据线图




LinearLayout
    android:layout_width="300dp">

/>
</LinearLayout>
Button
    ="wrap_content"
    android:text="添加一条新数据"
    android:onClick="ButADD"
    android:layout_marginTop="30dp" Button

android:layout_height
android:text="刷新所有数据"
android:onClick="ButREF"
android:layout_marginTop 2 dongxiaodongchart =设置图标坐标样式
 4 dongxiaodongchart.getAxisRight().setEnabled( 5 dongxiaodongchart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);顶部的线，最高限值虚线
 7 LimitLine ll1 = new LimitLine(3f,"最高限值");参数是显示的y轴值
 8 ll1.setLineWidth(2f);设置线条宽度
 9 ll1.enableDashedLine(10f,10f,0f);配置虚线样式
10 ll1.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);设置字体显示在线的上面
11 ll1.setTextSize(10f);设置字体大小
底部的线，最低限值虚线
13 LimitLine ll2 = new LimitLine(-2f,"最低限值"ll2.setLineWidth(2f);
ll2.enableDashedLine(10f,0f);
ll2.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_BOTTOM);
ll2.setTextSize(10f);
获取y轴对象
19 YAxis yAxis =设置图表的y轴显示最大最小值范围
yAxis.setAxisMaximum(15f);
22 yAxis.setAxisMinimum(-5f);
开始显示两条限值线
yAxis.addLimitLine(ll1);
yAxis.addLimitLine(ll2);
27 List<Entry> valsComp1 = 28 valsComp1.add(29 valsComp1.add(30 valsComp1.add(创建线对象
32 LineDataSet setComp1 = 34 setComp1.setColor(Color.BLUE);35 setComp1.setDrawFilled(36 37 LineData data =  LineData(setComp1);
38 39 数据刷新函数
42  refreshvalue(){
43     创建新的数据
44     ArrayList<Entry> values = 45     int i = 0; i < 10; i++46         float val = (float) (Math.random() * 10)-4;Math.random()：产生一个[0，1)
47         values.add( Entry(i,val));
49     获取现在的线对象
50     LineDataSet set1=(LineDataSet)  dongxiaodongchart.getData().getDataSetByIndex(0设置新的数据
    set1.setValues(values);
通知数据改变
54     set1.notifyDataSetChanged();
    dongxiaodongchart.getData().notifyDataChanged();
56     dongxiaodongchart.notifyDataSetChanged();
57     刷新显示
58     dongxiaodongchart.invalidate();
60 数据加入一条函数
 addvalue(){
62     63     LineDataSet set1=(LineDataSet)  dongxiaodongchart.getData().getDataSetByIndex(064     设置随意的坐标值
65     int x= set1.getEntryCount();
66     float y = (Math.random()：产生一个[0，1)
67     添加一个点
68     set1.addEntry( Entry(x,y));
69     70 71 73     74 75 76 按键事件监听
77  ButADD(View v){
78     Toast.makeText(MainActivity.79     addvalue();
80 81  ButREF(View v){
82     Toast.makeText(MainActivity.83     refreshvalue();
84 }