统计图表之MPAndroidChart曲线图解说

噗滋噗滋，最近在项目中要用到曲线图，于是乎我就在网上找了很多很多，有AChartengine，MPAndroidChart，helloChart等等，我还用过基于html5的jsChart来做过，不过最终还是选择了MPAndroidChart来做，因为AChartengine的扩展性不够好，jsChart跟网页交互也不咋好弄，其实用helloChart更漂亮的，不过个人用不到那么高档的，哈哈哈。。。。省略省略。。。。    哇咔咔，先盗用网上的图看看这个东西的神奇，究竟是神马。。。。。

噗滋，终于偷完图了，是不是看着感觉很牛逼很爽呢，下来我们一起完成这高大上的图表，go go go。。。

首先我们要把这个开源项目MPAndroidChart导入你新建的项目目录中，如下图：

然后我们要写xml文件，也只是加了个显示这个图标的控件，如下所示：

[html] view plaincopy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.    xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:paddingBottom="@dimen/activity_vertical_margin"  
6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
7.     android:paddingRight="@dimen/activity_horizontal_margin"  
8.     android:paddingTop="@dimen/activity_vertical_margin"  
9.     tools:context=".MainActivity" >  
10.   
11.     <com.github.mikephil.charting.charts.LineChart  
12.                 android:id="@+id/chart1"  
13.                 android:layout_width="match_parent"  
14.                 android:layout_height="400dp"  
15.                 android:layout_marginTop="20dp" />  
16.       
17.   
18. RelativeLayout>  

下面我们来看代码吧，其实也是一目了然：

[java] view plaincopy

1. package com.example.mpchart;  
2.   
3. import java.util.ArrayList;  
4.   
5. import android.app.Activity;  
6. import android.graphics.Color;  
7. import android.graphics.Typeface;  
8. import android.os.Bundle;  
9. import android.view.WindowManager;  
10.   
11. import com.github.mikephil.charting.charts.BarLineChartBase.BorderPosition;  
12. import com.github.mikephil.charting.charts.LineChart;  
13. import com.github.mikephil.charting.data.Entry;  
14. import com.github.mikephil.charting.data.LineData;  
15. import com.github.mikephil.charting.data.LineDataSet;  
16. import com.github.mikephil.charting.utils.Legend;  
17. import com.github.mikephil.charting.utils.Legend.LegendForm;  
18. import com.github.mikephil.charting.utils.XLabels;  
19. import com.github.mikephil.charting.utils.XLabels.XLabelPosition;  
20. import com.github.mikephil.charting.utils.YLabels;  
21.   
22. public class MainActivity extends Activity {  
23.       
24.     private LineChart mChart;  
25.   
26.     @Override  
27.     protected void onCreate(Bundle savedInstanceState) {  
28.         super.onCreate(savedInstanceState);  
29.         getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,  
30.                 WindowManager.LayoutParams.FLAG_FULLSCREEN);  
31.         setContentView(R.layout.activity_main);  
32.   
33.         mChart = (LineChart) findViewById(R.id.chart1);  
34.   
35.         // 设置在Y轴上是否是从0开始显示  
36.         mChart.setStartAtZero(true);  
37.         //是否在Y轴显示数据，就是曲线上的数据  
38.         mChart.setDrawYValues(true);  
39.         //设置网格  
40.         mChart.setDrawBorder(true);  
41.         mChart.setBorderPositions(new BorderPosition[] {  
42.             BorderPosition.BOTTOM});  
43.         //在chart上的右下角加描述  
44.         mChart.setDescription("曲线图");  
45.         //设置Y轴上的单位  
46.         mChart.setUnit("￥");   
47.         //设置透明度  
48.         mChart.setAlpha(0.8f);  
49.         //设置网格底下的那条线的颜色  
50.         mChart.setBorderColor(Color.rgb(213, 216, 214));  
51.         //设置Y轴前后倒置  
52.         mChart.setInvertYAxisEnabled(false);  
53.         //设置高亮显示  
54.         mChart.setHighlightEnabled(true);  
55.         //设置是否可以触摸，如为false，则不能拖动，缩放等  
56.         mChart.setTouchEnabled(true);  
57.         //设置是否可以拖拽，缩放  
58.         mChart.setDragEnabled(true);  
59.         mChart.setScaleEnabled(true);  
60.         //设置是否能扩大扩小  
61.         mChart.setPinchZoom(true);  
62.         // 设置背景颜色  
63.         // mChart.setBackgroundColor(Color.GRAY);  
64.         //设置点击chart图对应的数据弹出标注  
65.         MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);  
66.         // define an offset to change the original position of the marker  
67.         // (optional)  
68.         mv.setOffsets(-mv.getMeasuredWidth() / 2, -mv.getMeasuredHeight());  
69.         // set the marker to the chart  
70.         mChart.setMarkerView(mv);  
71.         // enable/disable highlight indicators (the lines that indicate the  
72.         // highlighted Entry)  
73.         mChart.setHighlightIndicatorEnabled(false);  
74.         //设置字体格式，如正楷  
75.         Typeface tf = Typeface.createFromAsset(getAssets(),  
76.                 "OpenSans-Regular.ttf");  
77.         mChart.setValueTypeface(tf);  
78.   
79.         XLabels xl = mChart.getXLabels();  
80. //      xl.setAvoidFirstLastClipping(true);  
81. //      xl.setAdjustXLabels(true);  
82.         xl.setPosition(XLabelPosition.BOTTOM); // 设置X轴的数据在底部显示  
83.         xl.setTypeface(tf); // 设置字体  
84.         xl.setTextSize(10f); // 设置字体大小  
85.         xl.setSpaceBetweenLabels(3); // 设置数据之间的间距  
86.   
87.         YLabels yl = mChart.getYLabels();  
88.         // yl.setPosition(YLabelPosition.LEFT_INSIDE); // set the position  
89.         yl.setTypeface(tf); // 设置字体  
90.         yl.setTextSize(10f); // s设置字体大小  
91.         yl.setLabelCount(5); // 设置Y轴最多显示的数据个数  
92.         // 加载数据  
93.         setData();  
94.         //从X轴进入的动画  
95.         mChart.animateX(4000);  
96.         mChart.animateY(3000);   //从Y轴进入的动画  
97.         mChart.animateXY(3000, 3000);    //从XY轴一起进入的动画  
98.           
99.         //设置最小的缩放  
100.          mChart.setScaleMinima(0.5f, 1f);  
101.         //设置视口  
102.         // mChart.centerViewPort(10, 50);  
103.   
104.         // get the legend (only possible after setting data)  
105.         Legend l = mChart.getLegend();  
106.         l.setForm(LegendForm.LINE);  //设置图最下面显示的类型  
107.         l.setTypeface(tf);    
108.         l.setTextSize(15);  
109.         l.setTextColor(Color.rgb(104, 241, 175));  
110.         l.setFormSize(30f); // set the size of the legend forms/shapes  
111.   
112.         // 刷新图表  
113.         mChart.invalidate();  
114.     }  
115.   
116.     private void setData() {  
117.         String[] aa = {"12","14","15","17","18","19","20"};  
118.         String[] bb = {"122.00","234.34","85.67","117.90","332.33","113.33","120.78"};  
119.   
120.         ArrayList xVals = new ArrayList();  
121.         for (int i = 0; i < aa.length; i++) {  
122.             xVals.add(aa[i]);  
123.         }  
124.   
125.         ArrayList yVals = new ArrayList();  
126.   
127.         for (int i = 0; i < bb.length; i++) {  
128.             yVals.add(new Entry(Float.parseFloat(bb[i]), i));  
129.         }  
130.   
131.         // create a dataset and give it a type  
132.         LineDataSet set1 = new LineDataSet(yVals, "DataSet Line");  
133.   
134.         set1.setDrawCubic(true);  //设置曲线为圆滑的线  
135.         set1.setCubicIntensity(0.2f);  
136.         set1.setDrawFilled(false);  //设置包括的范围区域填充颜色  
137.         set1.setDrawCircles(true);  //设置有圆点  
138.         set1.setLineWidth(2f);    //设置线的宽度  
139.         set1.setCircleSize(5f);   //设置小圆的大小  
140.         set1.setHighLightColor(Color.rgb(244, 117, 117));  
141.         set1.setColor(Color.rgb(104, 241, 175));    //设置曲线的颜色  
142.   
143.         // create a data object with the datasets  
144.         LineData data = new LineData(xVals, set1);  
145.   
146.         // set data  
147.         mChart.setData(data);  
148.     }  
149. }  

   还有上面代码有说到的数据上可以显示一个标注，代码如下： [java] view plaincopy

1. package com.example.mpchart;  
2.   
3. import android.content.Context;  
4. import android.widget.TextView;  
5.   
6. import com.github.mikephil.charting.data.CandleEntry;  
7. import com.github.mikephil.charting.data.Entry;  
8. import com.github.mikephil.charting.utils.MarkerView;  
9. import com.github.mikephil.charting.utils.Utils;  
10.   
11. public class MyMarkerView extends MarkerView {  
12.   
13.     private TextView tvContent;  
14.   
15.     public MyMarkerView(Context context, int layoutResource) {  
16.         super(context, layoutResource);  
17.   
18.         tvContent = (TextView) findViewById(R.id.tvContent);  
19.     }  
20.   
21.     // callbacks everytime the MarkerView is redrawn, can be used to update the  
22.     // content  
23.     @Override  
24.     public void refreshContent(Entry e, int dataSetIndex) {  
25.   
26.         if (e instanceof CandleEntry) {  
27.   
28.             CandleEntry ce = (CandleEntry) e;  
29.   
30.             tvContent.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));  
31.         } else {  
32.   
33. //            tvContent.setText("" + Utils.formatNumber(e.getVal(), 0, true));  
34.             tvContent.setText("" +e.getVal());  
35.         }  
36.     }  
37. }  

还有这个标注的xml代码： [html] view plaincopy

1. xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="40dp"  
5.     android:background="@drawable/marker2" >  
6.   
7.     <TextView  
8.         android:id="@+id/tvContent"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:layout_centerHorizontal="true"  
12.         android:layout_marginTop="7dp"  
13.         android:layout_marginLeft="5dp"  
14.         android:layout_marginRight="5dp"  
15.         android:text=""  
16.         android:textSize="12dp"  
17.         android:textColor="@android:color/white"  
18.         android:ellipsize="end"  
19.         android:singleLine="true"  
20.         android:textAppearance="?android:attr/textAppearanceSmall" />  
21.   
22. RelativeLayout>  

还有设置字体格式的文件，要放到这个文件夹下面，如图：

    其实上面的代码也没什么的，很简单，看注释一目了然，很清楚，上面我只是简单的列举了曲线一部分的使用方法，MPAndroidChart还有很多等着我们去挖掘，研究。。。。。

       我这些代码基本可以实现上面贴出来的前四张图的效果，下面我贴一张做的效果图看看，想要实现上面的效果，在代码上改一下就行了，具体看注释

效果不是很好，想更好的效果，继续研究吧，不喜勿喷哇，我是码渣，对此我感到很忧伤，这里只是简单的演示一下这个东西是神马。MPAndroidChart的扩展性很好，要想什么效果可以自己扩展实现。。。。。。。。好了，码渣吹牛逼吹到这里了，继续撸码。。。。。


源码：飞翔取码