Android realizes weather forecast temperature/temperature Polyline Trend Chart



Android realizes weather forecast temperature/temperature Polyline Trend Chart

Weather forecast app, will inevitably encounter drawing weather temperature/temperature, and other data on the trend of the line or curve, such as the temperature/temperature of the line chart, there will generally be two lines, one is a high temperature line, one is a low-temperature line.
I previously introduced a statistical chart library of third-party open source frameworks on an Android platform Mpandroidchart (article link address: http://blog.csdn.net/zhangphil/article/details/47656521), See this article for details on how to use it.
The temperature/Temperature line chart is now implemented based on the Mpandroidchart on the Android platform.

All the code for the main Activity:MainActivity.java:

Package Zhangphil.chart;import Java.text.decimalformat;import Java.util.arraylist;import android.app.Activity; Import Android.graphics.color;import Android.os.bundle;import Com.github.mikephil.charting.charts.LineChart; Import Com.github.mikephil.charting.components.legend;import Com.github.mikephil.charting.components.legend.legendform;import Com.github.mikephil.charting.components.legend.legendposition;import Com.github.mikephil.charting.components.xaxis;import Com.github.mikephil.charting.components.xaxis.xaxisposition;import Com.github.mikephil.charting.components.yaxis;import Com.github.mikephil.charting.components.yaxis.axisdependency;import Com.github.mikephil.charting.data.Entry; Import Com.github.mikephil.charting.data.linedata;import Com.github.mikephil.charting.data.linedataset;import Com.github.mikephil.charting.utils.valueformatter;public class Mainactivity extends Activity {@Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); SetconTentview (R.layout.activity_main); Linechart Mchart = (linechart) Findviewbyid (R.id.chart); Setchart (Mchart);//production of 5 data points. SetData (Mchart, 5); Legend L = mchart.getlegend (); L.setform (legendform.line); l.settextsize (12f); L.settextcolor (Color.Black); L.setposition (Legendposition.below_chart_center); Xaxis Xaxis = Mchart.getxaxis ();//move the ruler scale of the x axis to the bottom. Xaxis.setposition (Xaxisposition.bottom);//x-axis value between the interval xaxis.setspacebetweenlabels (1); xaxis.settextsize (12f); Xaxis.settextcolor (Color.Black); YAxis Leftaxis = Mchart.getaxisleft (); Setyaxisleft (Leftaxis); YAxis Rightaxis = Mchart.getaxisright (); Setyaxisright (Rightaxis);} private void Setchart (Linechart mchart) {mchart.setdescription ("@ http://blog.csdn.net/zhangphil"); Mchart.setnodatatextdescription ("If the value passed is empty, then you will see this text.") "); mchart.sethighlightenabled (true); mchart.settouchenabled (true); Mchart.setdragdecelerationfrictioncoef (0.9f); Mchart.setdragenabled (True); mchart.setscaleenabled (true); Mchart.setdrawgridbackground (true); Mchart.sethighlightperdragenabled (true); mChart.setpinchzoom (True); Mchart.setbackgroundcolor (Color.ltgray); Mchart.animatex (3000);} private void Setyaxisleft (YAxis leftaxis) {//4 tick values are marked on the left y-axis leftaxis.setlabelcount (4, true);// The color of the y axis axis is leftaxis.setgridcolor (color.red);//The Color Leftaxis.settextcolor (color.red) of the coordinate scale value on the y axis axis;// Y axis Max Leftaxis.setaxismaxvalue (x);//y-Axis minimum leftaxis.setaxisminvalue (ten); Leftaxis.setstartatzero (false); Leftaxis.setdrawlabels (TRUE);} private void Setyaxisright (YAxis rightaxis) {///Y axis marked with 8 tick values Rightaxis.setlabelcount (8, true);// The color of the tick value on the Y axis rightaxis.settextcolor (color.blue);//Y axis color rightaxis.setgridcolor (color.blue);// Y axis Maximum value rightaxis.setaxismaxvalue (+);//y-Axis minimum rightaxis.setaxisminvalue ( -5); Rightaxis.setstartatzero (false); Rightaxis.setdrawlabels (TRUE);}  private void SetData (Linechart mchart, int count) {arraylist<string> xvals = new arraylist<string> (); for (int i = 0; I < count; i++) {Xvals.add ("one month" + (i + 1) + "Day");} arraylist<entry> Yhigh = new arraylist<entry> (); Linedataset High = new Linedataset (Yhigh, "hot"); Sethightemperature (Hi, Yhigh, count); arraylist<entry> Ylow = new arraylist<entry> (); Linedataset low = new Linedataset (Ylow, "cryogenic"); Setlowtemperature (lo, Ylow, count); arraylist<linedataset> dataSets = new arraylist<linedataset> ();d atasets.add (High);d atasets.add (Low); Linedata data = new Linedata (xvals, dataSets);d Ata.setvaluetextcolor (Color.dkgray);d ata.setvaluetextsize (10f); Mchart.setdata (data);} private void Sethightemperature (Linedataset high, arraylist<entry> yvals,int count) {for (int i = 0; i < count; I + +) {float val = (float) math.random () + 30;yvals.add (new Entry (Val, i));} The y-axis on the left is the quasi-high.setaxisdependency (axisdependency.left); High.setlinewidth (5f); High.setcolor (color.red); High.setcirclesize (8f); High.setcirclecolor (Color.yellow); High.setcirclecolorhole (Color.dkgray); High.setdrawcirclehole (TRUE);//sets the format for displaying data on a polyline. If not set, the float data format is displayed by default. High.setvalueformatter (New Valueformatter () {@Overridepublic String GetformattEdvalue (float value) {DecimalFormat DecimalFormat = new DecimalFormat (". 0"); String s = "High Temperature" + decimalformat.format (value); return s;});} private void Setlowtemperature (Linedataset low, arraylist<entry> yvals,int count) {for (int i = 0; i < count; i++ ) {Float val = (float) math.random () + 5;yvals.add (new Entry (Val, i));} The right y-axis is the quasi-low.setaxisdependency (axisdependency.right);//Discounted Color low.setcolor (color.green);//Line width low.setlinewidth ( 3f)///Low.setcirclecolor (Color.Blue) of the ball color on the spot,//The Color Low.setcirclecolorhole (color.ltgray) of the hole filled with the center of the ball; The size of the sphere low.setcirclesize (5f); Low.setdrawcirclehole (true); Low.setvalueformatter (new Valueformatter () {@ Overridepublic String GetFormattedValue (float value) {DecimalFormat DecimalFormat = new DecimalFormat (". 0"); String s = "Low temperature" + decimalformat.format (value); return s;}});}}

Mainactivity.java Required Layout article Activity_main.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 " ><com.github.mikephil.charting.charts.linechart        android:id= "@+id/chart"        android:layout_width= " Match_parent "        android:layout_height=" match_parent "/>    </RelativeLayout>

Run results

The coordinate system of Mpandroidchart needs to be explained. The y-axis of the Mpandroidchart is divided into left and right two ordinate axes: the left ordinate axis (the YAxis obtained by the Getaxisleft () of the chart) and the starboard axis (YAxis obtained by the chart's Getaxisright ()). Although they are all yaxis a class representation in Mpandroidchart, they are independent of each other in their use, but they share the x axis (horizontal axis).
For example, in this case, the red y vertical axis on the left represents a high-temperature polyline, and it has its own set of drawing mechanisms to run independently; in the same vein, the blue y vertical axis on the right represents a low-temperature polyline, and it has its own set of drawing mechanisms that run independently. Don't confuse the two.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced. Reprint Please specify source: Http://blog.csdn.net/zhangphil

Android realizes weather forecast temperature/temperature Polyline Trend Chart