因為要做圖表相關的應用，後來百度發現了一個很好的Android開源圖表庫(XCL-Charts is a free charting library for Android platform.)

====================================================================================XCL-Charts V2.4

        Android開源圖表庫(XCL-Charts is a free charting library for Android platform.)

        XCL-Charts基於原生的Canvas來繪製各種圖表,在設計時，儘量在保證開發效率的同時，給使用者提供足夠多的定製化能力。

因此使用簡便,同時具有相當靈活的定製能力。
         目前支援(3D/非3D,背向式/橫向/豎向)柱形圖(Bar Chart)、3D/非3D餅圖(Pie Chart)、堆疊圖(Stacked Bar Chart)、面積圖(Area Chart)、
 折線圖(Line Chart)、曲線圖(Spline Chart)、環形圖(Dount Chart)、南丁格爾玫瑰圖(Rose Chart)、儀表盤(Dial Chart)、刻度盤(Gauge Chart)、 雷達圖(Radar Chart)、圓形圖(Circle Chart)、弧線比較圖、範圍條形圖(RangeBar Chart)、氣泡圖(Bubble Chart)

、散點圖(Scatter Chart)、玫瑰風向圖(Wind Rose)、漏斗圖(Funnel Chart) 、象限圖等圖表。

        其它特性還包括支援手勢縮放、圖表滑動、點選互動、多圖疊加、圖表批註、動畫效果、多XY軸顯示、軸線任意方位顯示、動態圖例、圖表參考線、柱圖刻度居中風格切換、混合圖表及同資料來源圖表型別切換等。

License

      採用Apache v2 License開源協議。

GitHub上的程式碼託管地址:

  QQ群: 374780627

   為什麼會有這個庫?

         之所以有這個庫，是因為前段時間學習Canvas時研究了一下各種圖的實現方式，後面想想或許可以自己整理成一個圖表庫。 就利用下班時間敲程式碼,形成了現在這個圖表庫XCL-Charts。很麻煩，因為期間我還有別的專案要寫。不過總算整理得能跑了。 

        所以XCL-Charts對我來說是個純興趣專案，純練手用的，我不是搞Android的，所以在工作中也用不到這個。 但沒想到的是，到今天為止，能做到現在這種程度，已大大出乎我自己的預料了。只能說，有時寫程式碼是有慣性的，停都停不下來。

   關於庫的一些東西:

    1.  基於原生的庫

         之前看好多人是用Webview呼叫js庫來畫圖，而XCL-Charts是直接利用原生Canvas 相關函式畫出圖形，當然，這各有好處，

         但基於原生的在速度和可操作性還是有優勢的，而且也無須你再去對web做啥研究。

    2 .  開放，自由，高定製性的庫

                     XCL-Chart儘量把圖的繪製邏輯封裝在類中，而把繪製相關的各個基礎元素開放出來，如果用過的人會發現，

           我分門別類開放了大量的Paint畫筆類及其它函式， 供使用者去定製圖的各種屬性功能...... 

                     結果出現了這種情況：很多人問怎麼找不到改文字大小的函式，改顏色的函式......之類問題。

                      親們，沒發現我把Android強大的Paint類都已經開放給你們了？裡面有著大量現成的這些函式，有現成的我何必還要再封裝一遍呢？

            同時我都把Paint類開放給你們了， 就相當於提供了無限的改造性。

開啟枷鎖，把那些封裝弱弱的庫丟一邊去吧。 你要習慣擁有這麼大的自由度， 自由很美好。

       3.  庫的設計想法

             有網友曾經問過我一個問題, 這麼多圖，這麼多程式碼，怎麼沒有看到繼承哪個view? 只傳了個draw中的canvas進來？？

                        是的，確實庫只傳了一個canvas進來，那麼多程式碼都是圍著這個canvas來做的。 

                        因為我更偏向於做一個基類庫，一個產生圖表的元件庫。

           我認為繪圖與view 應當做適當的隔離，讓大家各自做各家的事，而不是混在一起糾纏不清。 

           如果圖表需要作互動，響應一些view的事件，相簿提供一些相關的介面給view去呼叫，或通過一些技巧再去相互組合，這樣更加靈活。

           而且現有方式在處理混合圖時，再多的圖都可以呼叫圖類，在同一塊canvas上一層層的畫。 對那種一個view對應一種圖型別封裝的形式真不太感冒。                       

      4. 庫現在支援多少種圖

               今天加函式時數了數，目前大大小小有18種圖。驚訝 。不知不覺弄出這麼多種類的圖出來了。

      5. 功能需求

                特殊功能需求，要是能自己動手的，大家自己動手吧。我通常只加自己認為有意思的東東，再說精力實在也有限。

      6.bug，程式碼抽取

                 發現bug,歡迎動手提交修正。  

                 但對於只知道從庫裡抽取程式碼出來人。不要光索取，請記得還有回饋這回事。

       7.開源有沒有用？

                 開源也有段時間了，到底有沒有用呢？ 結論是有用，能收集到一堆的需求，五花八門，現在的app真是為了介面無所不用。 參考這些需求，能進一步

         完善這個專案。 但暫時就真正用改bug,加功能等方式參與進來的，屈指可數。所以就敲程式碼這個活而言，開源對我的幫助有，

         但沒想象中的那麼大。 不過無所謂了，這玩意本來就是自己圖寫個爽。

                對於真正有用程式碼方式參與的，我都有在程式碼和Demo的about中有寫上他們的網名，確實很感謝他們。 還有一群兄弟有些因為各種原因

         沒實際參與程式碼編寫， 不過他們用其它方式也算參與進來了，很多從開始到現在一直在關注，真的很不錯。這也算是開源的另一種收穫了。

    Demo工程中附帶的部份圖表例子:  

   

  

 

           

                       

       

   

   

      

     

      

   

      

       

  

   

     

        

     

  

====================================================================================

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. 如何設定軸或圖表物件上的顯示格式:

          相簿有提供相關回調函式，自行實現即可.

          一個簡單的例子程式碼:           

[java] view plaincopyprint?

1. //定義資料軸標籤顯示格式
2.             chart.getDataAxis().setLabelFormatter(new IFormatterTextCallBack(){  
3. @Override
4. public String textFormatter(String value) {  
5. // TODO Auto-generated method stub      
6.                     Double tmp = Double.parseDouble(value);  
7.                     DecimalFormat df=new DecimalFormat("#0");  
8.                     String label = df.format(tmp).toString();                 
9. return (label);  
10.                 }  
11.             });  

<span style="font-size:18px;">//定義資料軸標籤顯示格式
			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);
				}
				
			});</span>

     其它依此類推。

  5. 如果從Activity向view中的圖傳值，重新整理

       一個簡單的同時重新整理兩個曲線圖的例子:          

[java] view plaincopyprint?

1. Activity:  
2.    chartView.refreshChart(linePoint1, linePoint2);        
3. View:  
4. publicvoid refreshChart( List<PointD> linePoint1,  
5.                              List<PointD> linePoint2){  
6.         dataSeries1.setLineDataSet(linePoint1);  
7.         dataSeries2.setLineDataSet(linePoint2);  
8. this.invalidate();  
9.     }  

<span style="font-size:18px;">Activity:
   chartView.refreshChart(linePoint1, linePoint2);		
View:
   public void refreshChart( List<PointD> linePoint1,
							 List<PointD> linePoint2){
		
		dataSeries1.setLineDataSet(linePoint1);
		dataSeries2.setLineDataSet(linePoint2);
		this.invalidate();
	}</span>

  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