XCL-Charts圖表簡單教程

所支持的圖表類型:

   基類                            圖表名稱

   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();
    }

         

  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);

MAIL: [email protected]

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