XCL-Charts powerful dashboard, xcl-charts dashboard

XCL-Charts powerful dashboard, xcl-charts dashboard

The dashboard in XCL-Charts is one of the most troublesome diagrams I encapsulate. The reason is that people who have used it all know that this type of graph is too special. It is not easy to encapsulate it for most cases.

Fortunately, after a hard work, we finally developed a set of methods that we felt okay.

First, the following results are displayed:

Okay.

This type of chart is encapsulated separately. From the perspective of the overall layout, it can be divided into dashboards of different angles, such as 180,270 and 90,360. From the content perspective, there are two main difficulties: Various loops and various pointers.

You should observe the loop and pointer in the demo to understand the number of classes.

During encapsulation, I divided the rings of different styles into eight categories to plot and process most of the ring styles. Then, you can use the attributes to draw a picture suitable for your own needs.

Because there are too many categories, I will not illustrate how each circular axis is displayed.

As for pointers, as shown in the demo, I am hereDemonstrate several pointers of different styles and how to display multiple pointers in combination. This certainly does not include all of them. It is set through the combination of attributes and the combination with the annular axis.

You can customize various types of pointers.Because the basic calculation and drawing element chart library has been set up and opened up. So you don't have to worry about not drawing a proper pointer.

Pointers are one of the main issues that come back to us. The demo contains various types of graphs. Do I encapsulate each of them in the chart library independently?

Of course, the answer is no. My solution is as follows:

As mentioned earlier,I encapsulated eight types of axis styles. When drawing, you can decide which axes to add and where to display them.

My method is obvious. I give all the decisions to the user, and use the user's own add, and then use the relevant axis attribute settings to draw their own satisfactory results.

How much creativity they have can be drawn in a free combination.

Oh, forget, there is anotherDisplay of text in a dashboard. You often need to customize different texts. For this,My solution is to give the decision to the user.

After you have set the text and the paint brush attribute, you can specify the display position. How can this problem be solved?, My demo has proved.

It is useless to say so much. I will show the code of the example of the mixed graph (including the 270,180, 90 dashboard and the add method for different axes) in the demo above.

/*** Copyright 2014 XCL-Charts *** Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file before t in compliance with the License. * You may be obtain a copy of the License at ** http://www.apache.org/licenses/LICENSE-2.0 ** Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "as is" BASIS, * without warranties or conditions of any kind, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. ** @ Project XCL-Charts * @ Description Android chart base class Library Demo * @ author XiongChuanLiang <br/> (xcl_168@aliyun.com) * @ license http://www.apache.org/licenses/ Apache v2 License * @ version 1.3 */package com. demo. xclcharts. view; import java. util. arrayList; import java. util. list; import org. xclcharts. chart. dialChart; import org. xclcharts. common. densityUtil; import org. xclcharts. common. mathHelper; import org. xclcharts. renderer. XEnum; import android. content. context; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. paint. align; import android. graphics. paint. style; import android. util. attributeSet; import android. util. log; public class DialChart07View extends GraphicalView {private String TAG = "DialChart07View"; private DialChart chart = new DialChart (); private DialChart chart180 = new DialChart (); private DialChart chart90 = new DialChart (); private float mPercentage = 0.9f; public DialChart07View (Context context) {super (context); // TODO Auto-generated constructor stubinitView ();} public DialChart07View (Context context, AttributeSet attrs) {super (context, attrs); initView ();} public DialChart07View (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); initView ();} private void initView () {chartRender (); chartRender90 (); chartRender180 () ;}@ Override protected void onSizeChanged (int w, int h, int oldw, int oldh) {super. onSizeChanged (w, h, oldw, oldh); chart. setChartRange (w, h); chart180.setChartRange (w/2, h/3); chart90.setChartRange (w, h/3);} public void chartRender () {try {chart. setPadding (0, DensityUtil. dip2px (getContext (), 100), 0, 0); // set the title background chart. setApplyBackgroundColor (true); chart. setBackgroundColor (int) Color. rgb (28,129,243); // draw a border chart. showRoundBorder (); chart. setTotalAngle (270f); // sets the current percentage chart. getPointer (). setPercentage (mPercentage); // set the pointer length chart. getPointer (). setLength (0.65f, 0.2f); // Add the bearing addAxis (); //////////////////////////////////////// /// // Add the pointer addPointer (); // set the Additional Information addAttrInfo (); //////////////////////////////////////// /// //} catch (Exception e) {// TODO Auto-generated catch blockLog. e (TAG, e. toString () ;}} public void chartRender180 () {try {chart180.setTotalAngle (180f); chart180.setStartAngle (180f); // set the current percentage chart180.getPointer (). setPercentage (mPercentage); // set the pointer length chart180.getPointer (). setPointerStyle (XEnum. pointerStyle. TRIANGLE); chart180.getPointer (). setLength (0.65f, 0.2f); List <Float> ringPercentage = new ArrayList <Float> (); float rper = MathHelper. getInstance (). div (1, 4); // equivalent to 40% // 270, 4ringPercentage. add (rper); ringPercentage. add (rper); ringPercentage. add (rper); ringPercentage. add (rper); List <Integer> rcolor = new ArrayList <Integer> (); rcolor. add (int) Color. rgb (242,110,131); rcolor. add (int) Color. rgb (238,204, 71); rcolor. add (int) Color. rgb (42,231,250); rcolor. add (int) Color. rgb (140,196, 27); chart180.addStrokeRingAxis (0.75f, 0.6f, ringPercentage, rcolor); chart180.getPlotAxis (). get (0 ). getFillAxisPaint (). setColor (int) Color. rgb (28,129,243); Paint paintTB = new Paint (); paintTB. setColor (Color. WHITE); paintTB. setTextAlign (Align. CENTER); paintTB. setTextSize (22); paintTB. setAntiAlias (true); chart180.addAttributeInfo (XEnum. location. BOTTOM, "180 degree dashboard", 0.5f, paintTB);} catch (Exception e) {// TODO Auto-generated catch blockLog. e (TAG, e. toString () ;}} public void chartRender90 () {try {chart90.setPadding (DensityUtil. dip2px (getContext (), 150), 0, 0, 0); chart90.setTotalAngle (90f); chart90.setStartAngle (270f); List <Float> ringPercentage = new ArrayList <Float> (); float rper = MathHelper. getInstance (). div (1, 2); // equivalent to 40% // 270, 4ringPercentage. add (rper); ringPercentage. add (rper); List <Integer> rcolor = new ArrayList <Integer> (); rcolor. add (int) Color. rgb (242,110,131); rcolor. add (int) Color. rgb (238,204, 71); chart90.addStrokeRingAxis (0.75f, 0.6f, ringPercentage, rcolor); chart90.getPlotAxis (). get (0 ). getFillAxisPaint (). setColor (int) Color. rgb (28,129,243); chart90.getPointer (). setLength (0.65f); Paint paintTB = new Paint (); paintTB. setColor (Color. WHITE); paintTB. setTextAlign (Align. CENTER); paintTB. setTextSize (22); paintTB. setAntiAlias (true); chart90.addAttributeInfo (XEnum. location. BOTTOM, "90 degree dashboard", 0.5f, paintTB);} catch (Exception e) {// TODO Auto-generated catch blockLog. e (TAG, e. toString () ;}} public void addAxis () {List <String> rlabels2 = new ArrayList <String> (); for (int I = 0; I <7; I ++) {rlabels2.add (Integer. toString (I * 10);} chart. addInnerTicksAxis (0.7f, rlabels2); chart. getPlotAxis (). get (0 ). getAxisPaint (). setColor (Color. WHITE); chart. getPlotAxis (). get (0 ). getAxisPaint (). setStrokeWidth (8); chart. getPlotAxis (). get (0 ). getTickMarksPaint (). setColor (Color. WHITE); chart. getPlotAxis (). get (0 ). getTickLabelPaint (). setColor (Color. WHITE); List <String> rlabels3 = new ArrayList <String> (); for (int I = 0; I <5; I ++) {if (0 = I) {rlabels3.add ("");} elserlabels3.add (Integer. toString (I * 10);} chart. addOuterTicksAxis (0.8f, rlabels3); chart. getPlotAxis (). get (1 ). getAxisPaint (). setColor (Color. RED); chart. getPlotAxis (). get (1 ). getAxisPaint (). setStrokeWidth (5); chart. getPointer (). setPointerStyle (XEnum. pointerStyle. TRIANGLE); chart. getPointer (). getPointerPaint (). setStrokeWidth (3); chart. getPointer (). getPointerPaint (). setStyle (Style. FILL); chart. getPointer (). getPointerPaint (). setColor (int) Color. rgb (242,110,131); chart. getPointer (). getBaseCirclePaint (). setColor (int) Color. rgb (238,204, 71); chart. getPointer (). setBaseRadius (10f);} // Add the public void addPointer () {} private void addAttrInfo () {Paint paintTB = new Paint (); paintTB. setColor (Color. WHITE); paintTB. setTextAlign (Align. CENTER); paintTB. setTextSize (22); paintTB. setAntiAlias (true); chart. addAttributeInfo (XEnum. location. BOTTOM, "270-degree dashboard", 0.5f, paintTB);} public void setCurrentStatus (float percentage) {mPercentage = percentage; // clear the chart. clearAll (); chart90.clearAll (); chart180.clearAll (); // set the current percentage chart. getPointer (). setPercentage (mPercentage); addAxis (); // Add the pointer addPointer (); addAttrInfo (); chartRender180 (); chartRender90 (); chart90.getPointer (). setPercentage (mPercentage); chart180.getPointer (). setPercentage (mPercentage);} @ Overridepublic void render (Canvas canvas) {// TODO Auto-generated method stub try {chart. render (canvas); chart90.render (canvas); chart180.render (canvas);} catch (Exception e) {Log. e (TAG, e. toString ());}}}

The code is messy, but the display function is sufficient.

Well, I don't want to talk about it. If you want to know more about it, go to github or open-source China and check out the code.

Believe me, there is always something you need for this chart library.Hey.

BLOG: http://blog.csdn.net/xcl168

Mail: xcl_168@aliyun.com

How to display a dashboard when HighCharts exceeds the metric

Api.highcharts.com/highcharts?chart.xaxis
Items that can be queried by api

Why does Sega car have no dashboard ??

This is the problem of design, but the Display Instrument in the middle is indeed powerful, basically all the driving information can be displayed on it, can only say that the previous meter is on the steering wheel, it often causes Aesthetic Fatigue. Therefore, a breakthrough design was made in this change of previous design concepts.