Teach you how to achieve a line chart------the best chart library for Android Hellocharts the most detailed usage introduction

Source: Internet
Author: User
Tags polyline

Because the project needs to make a line chart, according to the date to show the corresponding results, so this article.
Used once Xcl-chart, but the feeling is only suitable for fixed charts, not to slide the kind, because you slip too card you know (after all, the author has not updated the optimization), humble words big God I joke, after all, I add your group for six months--

The second study of the Achartenginee chart Frame, a beautiful, two achartenginee of the customization is not flattering, made out of the chart simply can not meet the demand

Try again the best use of Mpchart and Hellochart the same year out, but than Hellochaet earlier. To be honest, it's also easy to use, custom-made, simple tables.
But in general, we all know that when using view, it is not smooth or there is a feeling of Kaka I think directly. Hit Something! (to know that less than 60fps I can not tolerate) but hellochart in the guarantee of beauty at the same time, zoom + swipe I can give more than 95 points. , especially for the smooth change of the axis I feel hellochart can no longer be a cow! Allow me to boast again, after all, won my heart AH ~ ~

Summary: If you need a lot of features, a variety of combinations, or display, the interface is not too much to ask for the choice of Mpchart.
If you need to be able to meet the basic chart function at the same time, but also to take into account the aesthetics, fluency, highly recommended hellochart.

Hellocharts now supports the following chart types:

Line chart (cubic lines, filled lines, scattered points) (wireframe)
Column chart (grouped, stacked, negative values) (column chart)
Pie chart (pie chart)
Bubble chart (bubble chart)
Combo Chart (Columns/lines) (Combination of bar chart and line chart)
Preview charts (for-column chart and line chart) (previews this is the most powerful, I'm useless, see)

Such an effect and interface I can only say "Day axe".

OK gossip about it and see how it's done.
First LIBS add:
Hellocharts-library-1.5.8.jar (own personal prefer to use Baidu and other cloud disk storage, so they are saved in the cloud disk);

Also given: http://download.csdn.net/detail/u012534831/9531494

Down, XML adds the layout.

1 <lecho.lib.hellocharts.view.LineChartView2             android:id= "@+id/line_chart"  3             android:layout_width= "Fill_parent"4             android:layout_height= "300DP"/>

Then one is the horizontal axis and one is the data points group.

1 PrivateLinechartview Linechart;2 3string[] Date = {"10-22", "11-22", "12-22", "1-22", "6-22", "5-23", "5-22", "6-22", "5-23", "5-22"};//x-Axis callouts4     int[] score= {50,42,90,33,10,74,22,18,79,20};//data points of the chart5     PrivateList<pointvalue> mpointvalues =NewArraylist<pointvalue>();6     PrivateList<axisvalue> maxisxvalues =NewArraylist<axisvalue> ();

Down OnCreate in 3 ways:

1 protected voidonCreate (Bundle savedinstancestate) {2         Super. OnCreate (savedinstancestate);3 Setcontentview (r.layout.activity_main);4Linechart =(Linechartview) Findviewbyid (R.id.line_chart);5Getaxisxlables ();//get dimensions for x-axis6Getaxispoints ();//Get coordinate points7Initlinechart ();//Initialize8}
1 /**2 * Set X-axis display3      */4     Private voidGetaxisxlables () {5          for(inti = 0; i < date.length; i++) {6Maxisxvalues.add (NewAxisvalue (i). SetLabel (Date[i]);7         }8     }9 Ten     /** One * Display of each point of the chart A      */ -     Private voidgetaxispoints () { -          for(inti = 0; i < score.length; i++) { theMpointvalues.add (NewPointvalue (i, score[i])); -         } -}
1 Private voidInitlinechart () {2Line line =NewLine (mpointvalues) setcolor (Color.parsecolor ("#FFCD41"));//the color of the polyline (orange)3List<line> lines =NewArraylist<line>();4Line.setshape (valueshape.circle);//the shape of each data point on a line chart here is a circle (there are three kinds: valueshape.square valueshape.circle valueshape.diamond)5Line.setcubic (false);//whether the curve is smooth, that is, a curve or a polyline6Line.setfilled (false);//whether to fill the area of the curve7Line.sethaslabels (true);//whether the data coordinates of the curve are added with notes8 //line.sethaslabelsonlyforselected (true);//Click Data coordinates to prompt the data (set this line.sethaslabels (true); invalid)9Line.sethaslines (true);//whether to use line display. If False, there are no curves, only dots are displayed.TenLine.sethaspoints (true);//whether to show dots if False then no origin is only a bit (each data point is a large dot) One Lines.add (line); ALinechartdata data =NewLinechartdata (); - data.setlines (lines); -  the         //axes -Axis AxisX =NewAxis ();//X-Axis -Axisx.sethastiltedlabels (true);//x axis whether the font is diagonal or straight, true is oblique display -Axisx.settextcolor (Color.gray);//Set Font Color +         //axisx.setname ("date"); //Table name -Axisx.settextsize (10);//Set Font size +Axisx.setmaxlabelchars (8);//up to a few x-axis coordinates, meaning your scaling gives the number of data on the x-axis 7<=x<=maxisxvalues.length AAxisx.setvalues (maxisxvalues);//fill the X-axis coordinate name atData.setaxisxbottom (AxisX);//x-axis at bottom -         //data.setaxisxtop (AxisX); //x-axis at top -Axisx.sethaslines (true);//x-axis split line -  -         //The y-axis automatically sets the upper y-axis based on the size of the data (I'll give a solution to the number of y-axis data below) -Axis Axisy =NewAxis ();//Y-Axis inAxisy.setname ("");//Y-Axis callout -Axisy.settextsize (10);//Set Font size toData.setaxisyleft (Axisy);//y-Axis set to left +         //data.setaxisyright (Axisy); //y-Axis set to the right -  the  *         //set behavior properties to support zooming, swiping, and panning $Linechart.setinteractive (true);Panax Notoginseng Linechart.setzoomtype (zoomtype.horizontal); -Linechart.setmaxzoom ((float) 2);//Maximum method Scale theLinechart.setcontainerscrollenabled (true, containerscrolltype.horizontal); + linechart.setlinechartdata (data); A linechart.setvisibility (view.visible); the         /**Note: The following 7, 10 only represents a number to the analogy. + * This was to resolve the x-axis fixed data count. See (Http://forum.xda-developers.com/tools/programming/library-hellocharts-charting-library-t2904456/page2); -          */ $Viewport v =NewViewport (Linechart.getmaximumviewport ()); $V.left = 0; -V.right = 7; - Linechart.setcurrentviewport (v); the}

Please see:

These 4 lines of code can set the x-axis data display number (x-axis 0-7 data).

1 when the number of points is less than (29), zoom out to the extreme Hellochart the default is all display.

2 when the number of points is greater than (29).

2.1 If you do not set Axisx.setmaxlabelchars (int count), it will automatically fit the number of data that the x-axis can display as well as possible.

2.2 If set Axisx.setmaxlabelchars (int count) This sentence, 33 data point test,

2.2.1 If Axisx.setmaxlabelchars (10); The inside of 10 is greater than v.right= 7; In the 7, the x-axis shows 7 data, and then the x-axis will be greater than 7 to ensure that the number is less than 10.

If the 2.2.2 is less than v.right= 7, in the 7, anyway, I feel that these two sentences seem to have failed the appearance--! If v.right= 7 is not set here; This sentence, the chart will show all the data as soon as possible, the interactivity is too poor

Here's a solution for fixing the number of Y-axes:
Example: Want to fix y-axis data from 0-100

1Axis Axisy =NewAxis (). Sethaslines (true);2Axisy.setmaxlabelchars (6);//Max label length, for example3list<axisvalue> values =NewArraylist<>();4  for(inti = 0; I < 100; i+= 10){5Axisvalue value =NewAxisvalue (i);6String label = "";7 Value.setlabel (label);8 Values.add (value);9 }TenAxisy.setvalues (values);

Visible, as long as the proportion of their own to split the data on the line.
OK, here's the basic.

SOURCE GitHub Address: Https://github.com/qht1003077897/hellocharts-line.git
csdn:http://download.csdn.net/detail/u012534831/9531702
Leave qq:791335000 Welcome to Exchange

Teach you how to achieve a line chart------the best chart library for Android Hellocharts the most detailed usage introduction

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.