XCL-Charts圖表庫簡要教程及常見問題

 

 這個Andriod圖表庫項目從開始至現在，熱情消耗幾近殆盡。還好已基本實現我想做的那些東西。趁還剩下點興趣，把一些點非常簡單的歸納一下。

 

      

 

所支持的圖表類型:

 

 

 

   基類                            圖表名稱

 

   BarChart                橫/豎向柱形圖及背向式柱形圖

 

   BarChart3D           橫/豎向3D柱形圖

 

   StackBarChart      橫/豎向堆疊式柱形圖

 

   RangeBarChart    范圍柱形圖  

 

    LineChart        折線圖

 

   SplineChart      曲線圖

 

   AreaChart         區域圖(折線/平滑)

 

   PieChart           餅圖

 

   PieChart3D     3D餅圖

 

   DountChart      環形圖

 

   ArcLineChart   弧線比較圖

 

   RoseChart       南丁格爾玫瑰圖/玫瑰風向圖

 

   FunnelChart    漏斗圖

 

   CircleChart      圓/半圓圖

 

   BubbleChart    氣泡圖

 

   RadarChart     雷達圖

 

   GaugeChart    刻度盤

 

   ScatterChart    散點圖

 

   DialChart         儀表盤

 

 

 

 

 

 

 主要組成(附注:很多命名都是我自己亂命名的，專業的不用太較真，能實現效果就好。)

 

圖表范圍:

 

    即圖中藍色漸變背景所在的范圍。

 

   設置函數：

 

   setChartRange(float width, float height)
   setChartRange(float startX, float startY, float width, float height)    

 

   

 

繪圖區:

 

   圖中黃色部分的范圍。

 

   可用下面函數設置繪圖區與整個圖表范圍的縮收間距：

 

   setPadding(float left, float top, float right, float bottom)   

 

   getPlotArea()

 

   如數據量太多，屏幕顯示不下時，可通過getPlotArea().extWidth()來擴大范圍，通過手勢滑動來查看。

 

    

 

標題欄:

 

   分主標題與子標題

 

   部份函數：

 

   setTitle(java.lang.String title)
   addSubtitle(java.lang.String subtitle)

 

 

 

坐標軸:

 

軸分兩種數據軸與分類軸，軸可以顯示在上下左右中位置，或依數據值顯示在任意位置。

 

   引用函數：

 

  getDataAxis()
  getCategoryAxis()

 

 

 

軸標題:

 

     可設置上下底部三個部份的標題

 

     引用函數：

 

getAxisTitle()

 

 

 

圖例:

 

   可設置成行或列模式，並顯示在圖表中任意位置。

 

   部份函數：

 

    getPlotLegend()

 

 

 

動態圖例:

 

   可以做各種圖表說明的補充。

 

  引用函數:

 

   getDyLegend()

 

    

 

定制線

 

   用於做各種標示或分界線。

 

   設置函數:

 

   setCustomLines()

 

 

 

圖批注

 

   用於在顯示時，在圖表指定元素上特別標識時使用。

 

   設置函數:

 

   setAnchorDataPoint()

 

 

 

焦點框

 

   在點擊選中時，標識出當前選中項。

 

   激活函數:

 

    showClikedFocus();

 

 

 

焦點線(動態線):

 

  用於在點擊時顯示相關的十字線等其它標識線。

 

   showDyLine() 激活。

 

   getDyLine()   獲取相關對象。

 

 

 

圖表縮放:

 

   disableScale()  禁用

 

   enabledScale() 啟用

 

 

 

手勢滑動

 

   disablePanMode() 禁用

 

   enabledPanMode() 啟用

 

   setPlotPanMode() 設置滑動模式(上下/左右/任意方向)

 

 

 

常見問題:

 

 1.  沒找到設置顏色的函數.

 

       找到相關子類的畫筆，自行設置顏色即可。

 

      如設置軸線的顏色: 

 

                chart.getDataAxis().getAxisPaint().setColor(Color.BLUE);

 

 

 

 2. 字體大小沒有隨着屏幕大小變化

 

      自行依屏幕大小設置相關子類畫筆的字體大小即可.

 

      如，設置圖表主標題字體大小:

 

           chart.getPlotTitle().getTitlePaint().setTextSize(22);

 

 

 

 3. 隱藏軸線或軸上的刻度/標簽

 

          以數據軸為例:

 

       chart.getDataAxis().hideAxisLine();
chart.getDataAxis().hideTickMarks();
chart.getDataAxis().hideAxisLabels();

 

         分類軸同理.

 

 

 

4. 如何設置軸或圖表對象上的顯示格式:

 

          圖庫有提供相關回調函數，自行實現即可.

 

          一個簡單的例子代碼:           

 

 

 

//定義數據軸標簽顯示格式
            chart.getDataAxis().setLabelFormatter(new IFormatterTextCallBack(){

                @Override
                public String textFormatter(String value) {
                    // TODO Auto-generated method stub
                    Double tmp = Double.parseDouble(value);
                    DecimalFormat df=new DecimalFormat("#0");
                    String label = df.format(tmp).toString();
                    return (label);
                }

            });

     其它依此類推。

 

 

 

 

  5. 如果從Activity向view中的圖傳值，刷新

 

       一個簡單的同時刷新兩個曲線圖的例子:          

 

 

 

Activity:
   chartView.refreshChart(linePoint1, linePoint2);
View:
   public void refreshChart( List<PointD> linePoint1,
                             List<PointD> linePoint2){

        dataSeries1.setLineDataSet(linePoint1);
        dataSeries2.setLineDataSet(linePoint2);
        this.invalidate();
    }

 

         要實在不懂，把chart類設為Public, 然后直接在Activity中更新值及調用view.refreshChart()來刷新圖表.

 

 

 

  6. 雙Y軸怎么處理

 

      多圖疊加即可。參考下Demo中的混合圖例子。

 

 

 

  7. 需要柱形圖與折線圖合在一起顯示 

 

    多圖疊加即可，可參考下Demo中的混合圖例子。

 

 

 

 8. 需要特別標識某一個點或值

 

    使用圖批注即可。

 

 

 

9. 需要顯示這種或那種動畫效果

 

    可參考Demo中一些例子的動畫，如漸顯，由遠及近等來自己實現，也可調用第三方庫來做。

 

 

 

10. 能否設置柱形寬度

 

   柱形大小是依繪圖區寬度及柱形個數自動設置的，不能顯式指定。

 

 

 

11. 圖表移出繪圖區范圍不見了。

 

    目前是任意移動，可使用hscrollview來做。可參考相關例子

 

  

 

12. 數據量很大，滑動時速度慢

 

      如不需點擊和縮放效果，可使用hscrollview來做，否則可使用disableHighPrecision()來提高性能。

 

   但這個函數餅圖類圖表慎用。

 

 

 

13. 怎么在Activity中，得到圖表的點擊對象和相關值

 

     可參考Demo,有相關演示。

 

 

 

14. 溫度計軸/不等距軸怎么做?

 

     XCL-Charts目前不支持，但幸好大S寫了一個經典實現，在網友圖表庫目錄下。

 

 

 

15. 區域圖有沒漸變效果。

 

      有，可指定漸變起始和結束色，從上到下或從左至右漸變。

 

 

 

16. 圖例要顯示在下方或左右。

 

     有相關函數，直接設置即可。Demo中有相關例子。

 

 

 

17. 有個軸要顯示在頂部

 

    有相關屬性，直接設置即可。Demo中有相關例子。

 

 

 

18. 折線圖左右滑動的例子

 

     兩個View,一個view用於顯示Y軸，圖標題，圖例，另一個用於顯示scrollview及圖表。

 

 

 

 19. Y軸標題顯示在頂部,X軸標題顯示在右下

 

     兩種方式，要么參考Demo中“豎向定制線柱形圖"例子的做法。

 

      要么在view的render()中，通過 chart.getPlotArea().getLeft()及chart.getPlotArea().getTop()等函數得到相關坐標，

 

     直接drawText即可。

 

 

 

 20. 點擊時選中不夠靈敏，怎么辦？

 

    利用extPointClickRange(10); 擴大選中范圍即可。

 

 

 

21.手勢移動時，軸標簽已移出繪圖區范圍了仍顯示。

 

          有提供相關函數來控制，移出后的顯示范圍，以X方向為例:

 

                     //平移時收縮下
float margin = DensityUtil.dip2px(getContext(), 20);
chart.setXTickMarksOffsetMargin(margin);

 

      Y方向依上例類推。

 

 

 

22. 餅圖標簽折線從扇區邊上起始延伸出來。

 

       直接設置折線線起始點即可。chart.getLabelBrokenLine().setBrokenStartPoint(10f); 值為0-10的比例。

 

 

 

23. 餅圖標簽和線與扇區要相同顏色.

 

     chart.syncLabelLineColor()即可。

 

 

 

24. 餅圖數據傳進去有空隙或不顯示？

 

   Java的float和double類型在計算時會有誤差。造成圓心角合計小於或超出360度。

 

    建議調用庫中的Mathhelper類中的相關函數來做計算處理。

 

 

 

25. 餅圖標簽太密，看不清。

 

        太密集的標簽不重疊的處理算法還沒興趣去研究, 但庫已提供了5,6種標簽顯示風格。建議不同扇區依角大小錯開，

 

  並不同扇區指定不同標簽顯示風格來處理。

 

 

 

26.我需要多圖同步，並定時刷新數據。

 

 

 

    Demo中有，可參考雙線圖的例子。

 

 

 

27. 從哪可以下載源碼

 

     https://github.com/xcltapestry/XCL-Charts

 

 

 

28. 下載后怎么這么多叉。

 

    重新導入一下 xclcharts.jar即可。

 

 

 

29.怎么有兩個工程。

 

     xcl-charts是生成jar的工程

 

     xcl-charts-demo 是用來演示的工程。

 

 

 

30 怎么在xml中放圖表,在ChartsActivity中全是代碼生成的。

 

    親，還有其它很多例子是將view放在xml中的。別老盯着ChartsActivity一個。

 

 

 

31. 線上的點或線太大或太小，怎么調？

 

   有相關函數設置半徑

 

       /設置線上點的大小
       line6.setDotRadius(15)
//設置線的粗線
line6.getLinePaint().setStrokeWidth(5);

 

 

 

32. 多條線在一起時，標簽重疊。

 

    數據源是沒法管控的，可以給不同線設置不同風格和旋轉角度，標簽的位置也是

 

    可以調的，可以有些顯示在上面，有些顯示在點下面。

 

 

 

33.怎么一下占這么多內存。

 

   為了方面掛演示例子,僅ChartsActivity就一次生成了40多個view。你單挑試試，雖然因為定制性強，所以選項多，

 

但哥們當初也用了不少優化內存手段的。

 

 

 

34.細類好多。

 

   嗯，因為我野心比較大，封裝好零件，以后無任想加什么圖，只需關注圖本身的實現邏輯即可。

 

   哥搭的是一套Android繪圖的基礎平台，而不是僅僅只畫的某一類圖。

 

   再說一句，用Java寫代碼就啰嗦，我現在很喜歡Golang。

 

 

 

 

 

 

 

35.群主，庫的設計思想是什么？

 

    不知道怎么回答。 我只想到幾個，圖效果要炫，定制性要高，調用要靈活，對復雜圖能通過圖組合疊加來實現。

 

    所有零部件都要封裝好，這樣我以后加圖方便。

 

 

 

36.這庫的文檔在哪？

 

     doc目錄下有Javadoc可查函數和相關類信息。其它直接看Demo吧，目前有40幾個例子，你以為我真很閑？

 

 

 

37. 群主，請教一個aChartEngine問題

 

    抱歉，不會也沒使用過aChartEngine。曾瀏覽過源碼，非常經典，但未曾看懂過。

 

 

 

38. 幫看看MPAndroidChart的問題

 

        抱歉，沒研究過，但看過MPAndroidChart demo. 然后，我覺得我做得很多方面比這個更好。

 

    至少圖表表現方法和組合要更靈活，圖表種類也更多。

 

 

 

39. 我只想抽取你的部份代碼。

 

    滾。

 

 

 

40. 你不是要收手嗎？

 

   是的，說過很多次收手了。

 

 

 

41.柱形不想要漸變效果

 

     自行設置BarStyle即可

 

     chart.getBar().setBarStyle(XEnum.BarStyle.OUTLINE);

 

 

 

42. 如何去掉柱子間的間隔    

 

      //柱子間無間隔
      chart2.getBar().setBarTickSpacePercent(1.5f);

 

      主要是設比例，1.5f只是個例子

 

 

 

43 Jar體積太大(現在有400多k)，如何精簡庫?

 

        簡單粗暴的方法如下:

 

               打開XCL-Charts工程,  找到org.xclcharts.chart目錄，把你不需要的圖表類型，統統刪除掉就行了。放心，沒有后遺症。 

 

       如果你還有耐心，你還可以去其它目錄清除不必要的組件類。

 

 

 

44 Chart類與View的關系

 

         Chart只是個普通的Java類, View把Canvas傳給它，然后Chart類作一系列的繪制動作。

 

   所以一個View理論上可以有無數個Chart.這些Chart類可以相互疊加，組合成各種各樣的混合圖。 

 

   這是與其它很多圖庫那種一個view對應一種Chart不同的地方.

 

 

 

45 Chart類怎么用在XML中

 

     Demo中有很多例子，請留意com.demo.xclcharts目錄。

 

 

 

46. 圖庫沒有想要的樣式或能不能嵌入圖片？

 

     自己找到相應的代碼位置，去增加代碼吧。 別指望啥都有。