XCL-Charts強大的儀錶盤，xcl-charts儀錶盤

XCL-Charts強大的儀錶盤，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<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);//設定標題背景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<Float> ringPercentage = new ArrayList<Float>();float rper = MathHelper.getInstance().div(1, 4); //相當於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度儀錶盤", 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); //相當於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度儀錶盤", 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);}//增加指標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 stub try{ 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

  

  

HighCharts 超出指標怎顯示 儀錶盤

api.highcharts.com/highcharts#Chart.xAxis
根據api可以查的到的
 
世嘉車為何沒有儀錶盤？？

這個是設計上面的問題，不過中間那個顯示儀錶確實功能滿強大的，基本上所有行車資訊都能顯示在那上面，只能說以往的儀錶都是在方向盤上面，往往會造成審美疲勞，所以這次一改以往的設計理念做了突破性的設計