1. Introduction
Mpandroidchart GitHub Address
Mpandroidchart's strength is not more said, the latest version is 3.0.1, in the new version of a lot of methods are discarded, this to note that most of the information found on the Internet is about the old version, today to achieve a line chart, the process recorded, to share to everyone.
:
2. Introduction of Open Source libraries
- Add the following code to the Build.gradle file in the project root directory
allprojects { repositories { "https://jitpack.io" } }}
- Add dependencies to the Buil.gradle file in the app root directory
{ compile ‘com.github.PhilJay:MPAndroidChart:v3.0.1‘}
3. Implement
In the project, I extracted the graph-related functions into a tool class chartutils.
Initializing a chart
The Initchart method is used to set the function of the chart and the style that is displayed, the code for scaling and animation is commented on, and if you want to use animations, you do not need to invoke the Invalidate method of the chart.
/** * Initialize chart * * @param Chart Original chart * @return The graph after initialization */ Public StaticLinechartInitchart(Linechart Chart) {//Do not display data descriptionChart.getdescription (). setenabled (false);//When no data is present, "No data" is displayedChart.setnodatatext ("No Data");//Do not show table colorChart.setdrawgridbackground (false);//cannot be scaledChart.setscaleenabled (false);//Do not display values to the right of the y-axisChart.getaxisright (). setenabled (false);//Do not show legendLegend Legend = Chart.getlegend (); Legend.setenabled (false);//Left offset 15DP, offset the y-axis to the right offset 30DPChart.setextraleftoffset (- the); Xaxis Xaxis = Chart.getxaxis ();//Do not display X-axisXaxis.setdrawaxisline (false);//Set the location of the x-axis dataXaxis.setposition (XAxis.XAxisPosition.BOTTOM); Xaxis.settextcolor (Color.White); Xaxis.settextsize ( A); Xaxis.setgridcolor (Color.parsecolor ("#30FFFFFF"));//Set X-axis data offsetXaxis.setyoffset (- A); YAxis YAxis = Chart.getaxisleft ();//Do not display y-axisYaxis.setdrawaxisline (false);//Set the position of y-axis dataYaxis.setposition (YAxis.YAxisLabelPosition.OUTSIDE_CHART);//Do not emit a horizontal line from the y-axisYaxis.setdrawgridlines (false); Yaxis.settextcolor (Color.White); Yaxis.settextsize ( A);//Set y-axis data offsetYaxis.setxoffset ( -); Yaxis.setyoffset (-3); Yaxis.setaxisminimum (0);//matrix matrix = new Matrix (); //X-axis Scaling 1.5 times times //matrix.postscale (1.5f, 1f); //zoom before the chart animation is displayed //chart.getviewporthandler (). Refresh (Matrix, chart, false); //X-axis execution animation //chart.animatex (+);Chart.invalidate ();returnChart;}
Set up chart data
The Setchartdata method is used to set the data displayed by the chart, as well as the properties of the polyline.
/** * Set Chart Data * * @param Chart chart * @param values Data */ Public Static void Setchartdata(Linechart chart, list<entry> values) {Linedataset linedataset;if(Chart.getdata ()! =NULL&& chart.getdata (). Getdatasetcount () >0) {Linedataset = (linedataset) chart.getdata (). Getdatasetbyindex (0); Linedataset.setvalues (values); Chart.getdata (). notifydatachanged (); Chart.notifydatasetchanged (); }Else{Linedataset =NewLinedataset (values,"");//Set curve colorLinedataset.setcolor (Color.parsecolor ("#FFFFFF"));//Set smooth curveLinedataset.setmode (LineDataSet.Mode.CUBIC_BEZIER);//small dots that do not display coordinate pointsLinedataset.setdrawcircles (false);//Do not display data for coordinate pointsLinedataset.setdrawvalues (false);//Do not display the anchor lineLinedataset.sethighlightenabled (false); Linedata data =NewLinedata (Linedataset); Chart.setdata (data); Chart.invalidate (); }}
Update chart
The Notifydatasetchanged method is used to update the chart, and the x-axis labels can be displayed dynamically.
/** * Update chart * * @param Chart chart * @param values Data * @param valueType Data type * * Public Static void notifydatasetchanged(Linechart chart, list<entry> values,Final intValueType) {Chart.getxaxis (). Setvalueformatter (NewIaxisvalueformatter () {@Override PublicStringGetFormattedValue(floatValue, Axisbase axis) {returnXvaluesprocess (ValueType) [(int) value]; } }); Chart.invalidate (); Setchartdata (chart, values);}
X-Axis data processing
The Xvaluesprocess method is used to process the x-axis data.
The x-axis can display three types of data, namely today's data, this week's data, and this month's data.
/** * x-AXIS Data processing * * @param valueType data type * @return X-Axis * *Private StaticString[]xvaluesprocess(intValueType) {string[] week = {"Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"};if(ValueType = = Dayvalue) {//Todaystring[] Dayvalues =Newstring[7];LongCurrentTime = System.currenttimemillis (); for(inti =6; I >=0; i--) {Dayvalues[i] = timeutils.datetostring (currenttime, timeutils.dateformat_day); CurrentTime-= (3* -* -* +); }returnDayvalues; }Else if(ValueType = = Weekvalue) {//This weekstring[] Weekvalues =Newstring[7]; Calendar calendar = Calendar.getinstance ();intCurrentweek = Calendar.get (Calendar.day_of_week); for(inti =6; I >=0; i--) {Weekvalues[i] = Week[currentweek-1];if(Currentweek = =1) {Currentweek =7; }Else{Currentweek-=1; } }returnWeekvalues; }Else if(ValueType = = Monthvalue) {//This monthstring[] Monthvalues =Newstring[7];LongCurrentTime = System.currenttimemillis (); for(inti =6; I >=0; i--) {Monthvalues[i] = timeutils.datetostring (currenttime, timeutils.dateformat_month); CurrentTime-= (4* -* -* -* +); }returnMonthvalues; }return Newstring[]{};}
Use in activity
ChartUtils.initChart(chart);ChartUtils.notifyDataSetChanged(chart, getData(), ChartUtils.dayValue);
Layout file
<com.github.mikephil.charting.charts.LineChart android:id="@+id/chart" android:layout_width="match_parent" android:layout_height="match_parent" />
4. Written in the last
Full demo Download
Android Chart Mpandroidchart Line chart