XCL-Charts强大的仪表盘

XCL-Charts中的仪表盘是我封装的最麻烦的图之一。原因嘛，用过的人都知道，这类图太有特色了，要弄出一个适用于大部份情况的封装出来实在不容易。

还好，经过一翻折腾，总算搞出来一套自已感觉还行的方法。

   先展示下效果:

   还可以吧。

     这类图封装分开看，从总布局角度看分为180,270,90,360等不同角度的仪表盘。从内容看则主要有两个部份的难点，丰富多彩的各类环与各类指针。

    大家注意观察下上图demo中的环与指针就明白有多少类吧。

     我在封装时，把不同风格的环分为8大类. 来绘制处理大部份各类环形风格，然后用户可通过属性的细调来画出适合自已需求的图。

因为类别太多，我就不在这一一对每个环形轴显示成什么样举例了。

   至于指针，如demo所见，我在这展示了几种不同风格的指针，及其多指针叠加显示的方法。 这当然不包含全部，通过属性的组合设置及与环形轴的配合。

   用户可以定制各种类型的指针。因为基本的计算和绘制要素图表库已经搭建好并开放出来了。所以不用担心没合适的指针可绘制。

    指针是一方面，回到我们的主要问题点。demo中有各种各类的图，是不是我在图表库中每一个都独立封装一个呢？

  答案当然是不，我的解决方法如下:

前面提过，我封装了8大类的轴风格。在实现绘制时，用户可以自己决定add哪些轴，并显示在图中的哪个位置。

    我的方法很明显了，把所有的决定权交给用户，通过用户自己的add，再通过相关的轴的属性设置来画出他们自己满意的效果。

    他们有多少创意，都可以通过自由组合方式绘制出来。

    噢，忘记了，还有一个仪表盘中文字的显示。常要定制各种不同的文字，对于这个，我的解决方法同样是，把决定权交给用户。

    让用户定好文字及设置好paint画笔属性后，传入用户指定的显示位置即可。 想怎么弄就怎么弄吧，我上图的demo已经证明了。

      说这么多没用，我拿上面demo其中混合图(包含了270,180,90三种仪表盘及不同轴的add方法)的例子的代码在这展示下吧。

/*** Copyright 2014  XCL-Charts* * Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may 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图表基类库演示* @author XiongChuanLiang
(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);//设置标题背景			chart.setApplyBackgroundColor(true);chart.setBackgroundColor( (int)Color.rgb(28, 129, 243) );//绘制边框chart.showRoundBorder();chart.setTotalAngle(270f);//设置当前百分比chart.getPointer().setPercentage(mPercentage);//设置指针长度chart.getPointer().setLength(0.65f,0.2f);	//增加轴承addAxis();						///增加指针addPointer();//设置附加信息addAttrInfo();/} catch (Exception e) {// TODO Auto-generated catch blockLog.e(TAG, e.toString());}}public void chartRender180(){try {	chart180.setTotalAngle(180f);chart180.setStartAngle(180f);//设置当前百分比chart180.getPointer().setPercentage(mPercentage);//设置指针长度chart180.getPointer().setPointerStyle(XEnum.PointerStyle.TRIANGLE);chart180.getPointer().setLength(0.65f,0.2f);	List ringPercentage = new ArrayList();			float rper = MathHelper.getInstance().div(1, 4); //相当于40%	//270, 4ringPercentage.add(rper);ringPercentage.add(rper);ringPercentage.add(rper);ringPercentage.add(rper);List rcolor  = new ArrayList();			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度仪表盘", 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 ringPercentage = new ArrayList();			float rper = MathHelper.getInstance().div(1, 2); //相当于40%	//270, 4ringPercentage.add(rper);ringPercentage.add(rper);List rcolor  = new ArrayList();			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度仪表盘", 0.5f, paintTB);} catch (Exception e) {// TODO Auto-generated catch blockLog.e(TAG, e.toString());}}public void addAxis(){List rlabels2  = new ArrayList();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 rlabels3  = new ArrayList();for(int i=0;i<5;i++){if(0 == i){rlabels3.add("");	}else					rlabels3.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);}//增加指针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度仪表盘", 0.5f, paintTB);}public void setCurrentStatus(float percentage){								mPercentage =  percentage;//清理chart.clearAll();chart90.clearAll();chart180.clearAll();//设置当前百分比chart.getPointer().setPercentage(mPercentage);addAxis();//增加指针addPointer();addAttrInfo();chartRender180();chartRender90();chart90.getPointer().setPercentage(mPercentage);chart180.getPointer().setPercentage(mPercentage);}@Overridepublic void render(Canvas canvas) {// TODO Auto-generated method stubtry{chart.render(canvas);chart90.render(canvas);chart180.render(canvas);} catch (Exception e){Log.e(TAG, e.toString());}}}

        代码有点乱，但用于展示功能足够了。

好了，不多说了，想要了具体了解的，自己上github或开源中国下代码看吧。

         相信我，我弄的这个图表库，总有一点功能会是你所需要的。 嘿嘿。

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

    Mail: xcl_168@aliyun.com

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！