圖形產生工具（funsionChartsFree and ifreeChart）

          上一篇講到在頁面中展示樹形資料，是使用者能夠更好的查看資料間的層次層級，這篇部落格來看一下如何通過柱狀圖，餅圖等來展示資料，類似我們數學中的資料分析處理的圖形展示，這樣能夠使使用者更加直觀的對資料之間的關係，總體與個體之間的關係查看的非常清楚。看下邊兩種圖，是不是非常美觀，更重要的形象直觀呢！當然這個產品為我們提供了很多種圖表供我們使用，對於圖表的需求的可以基本滿足我們的。

          好，先看一下什麼時候我們會選擇這些圖形來展示資料呢？柱狀圖更適合來展示根據時間段的不同，年齡的不同等來查看一些相同的資料，用來做比較；而餅圖呢？更適合查看對於同一資料，其它資料的佔用量，例如，一家公司的員工的薪水段查詢等，能夠非常形象的展示出內部各個塊的大小……        所以說，想要使用這些映像，需要我們明白什麼時候用更合適，千萬不要為了用而用，要用的恰到好處，這才是重點。

 

        好了，看一下如何?將資料庫的資料展現成這種美好的圖形吧。

       一，FunsionChartsFree：

           1，簡介：FusionCharts是InfoSoft Global公司的一個產品，InfoSoft Global公司是專業的Flash圖形方案供應商，基於Flash技術的產品，都非常的漂亮。 FusionCharts free 是一個跨平台，跨瀏覽器的flash圖表組件解決方案。

            2，原理：FunsionChartsFree是通過Flash+xml+Js三者的知識來實現的。首先需要我們通過查詢資料庫，將查詢出來的資料寫成指定規範的XML檔案（就像昨天說的tree也是這樣的），然後結合FunsionChartsFree提供的不同風格的Flash檔案，在前台利用JS進行讀取進行設定，即可以我們想要的方式顯示到我們的jsp頁面中，這是非常方便使用的。（建議，多看一下此產品提供的例子，我們可以通過例子來模仿產生）

           3，使用：

             a,首先將提供的JS代碼和自己想要實現圖形風格的Flash進行拷貝到項目中，這裡使用了環形風格Flash檔案進行展示：

FCF_Doughnut2D.swf（對應的Flash檔案）

FusionCharts.js（對應的核心JS檔案）

 

              b,其次在後台通過查詢資料庫，字串的拼接產生對應xml檔案，不同風格樣式的XML規範也該也不同，查看例子中的源碼即可：

<graph showNames='1'  decimalPrecision='0'  >   <set name='USA' value='20'/><set name='France' value='7'  />    <set name='India' value='12' />    <set name='England' value='11' /><set name='Italy' value='8' />    <set name='Canada' value='19'/>    <set name='Germany' value='15'/></graph>

           c,最後看一下前天JS代碼的操作吧，這裡寫一個最基礎的JavaScript代碼，當然我們也可以通過JQuery代碼來實現：

//點擊詳情，用餅狀圖顯示比例狀況function viewScale(orgcode){var xRequest;//建立對象if(window.XMLHttpRequest){xRequest = new XMLHttpRequest();}else if(window.ActiveXObject){xRequest = new ActiveXObject("Microsoft.XMLHTTP");}//設定回呼函數xRequest.onreadystatechange=function(){if(xRequest.readyState==4){if(xRequest.status==200){   var orgcode=xRequest.responseText;  //這三行代碼用來顯示    //指定對應的Falsh檔案   var chart = new FusionCharts("/charts/FCF_Doughnut2D.swf", "ChartId", "400", "240");      //指定資料來源   chart.setDataURL("對應XML的資料來源");     //指定顯示位置      chart.render("chartdiv");}else{alert(xRequest.status);}}};//開啟通道//新增時間戳記，來解決get方法中瀏覽器的緩衝問題。xRequest.open("GET","/servlet/viewScale?timeStamp=" + new Date().getTime() +"&orgcode=" + orgcode,true);xRequest.send();}

      這樣簡單處理以後，就可以在頁面上顯示我們想要的效果了：

          以上為FunsionChartsFree的簡單使用。當然為了能夠更好的滿足使用者，這裡我們可以利用策略模式，在頁面提供選擇框，然使用者選擇用什麼方式進行顯示，而後台我們實現好幾種圖形展示，這樣感覺會大大滿足使用者的體驗度的，還是非常不錯的。

 

        更多FunsionChartsFree資料請查看：FusionCharts_Free中文開發指南(詳細)

 

      二，ifreeChart

           1，簡介：JFreeChart是開放原始碼網站SourceForge.net上的一個JAVA項目，它主要用來各種各樣的圖表，這些圖表包括：餅圖、柱狀圖(普通柱狀圖以及堆棧柱狀圖)、線圖、地區圖、分布圖、混合圖、甘特圖以及一些儀錶盤等等。和上邊的差別就是這裡的圖形可能沒有上邊的形象漂亮，因為這裡是利用JAVA來實現的，而上邊是通過Flash來實現的，但是對於我們普通審美還是夠用的。

          2,使用，

               a,首先需要引入IfreeChart的核心jar包：jfreechart-1.0.2.jar和jcommon-1.0.5.jar

               b，直接編寫Java代碼即可，這裡簡單看一個例子：

/** * 該類用於示範最簡單的柱狀圖產生 * @author Winter Lau */public class b {public static void main(String[] args) throws IOException{CategoryDataset dataset = getDataSet2();JFreeChart chart = ChartFactory.createBarChart3D("水果產量圖", // 圖表標題"水果", // 目錄軸的顯示標籤"產量", // 數值軸的顯示標籤dataset, // 資料集PlotOrientation.VERTICAL, // 圖表方向：水平、垂直true, // 是否顯示圖例(對於簡單的柱狀圖必須是false)false, // 是否產生工具false // 是否產生URL連結);FileOutputStream fos_jpg = null;try {fos_jpg = new FileOutputStream("D:\\fruit.jpg");ChartUtilities.writeChartAsJPEG(fos_jpg,1.0f,chart,400,300,null);} finally {try {fos_jpg.close();} catch (Exception e) {}}}/** * 擷取一個示範用的組合資料集對象 * @return */public static CategoryDataset getDataSet2() {DefaultCategoryDataset dataset = new DefaultCategoryDataset();dataset.addValue(100, "北京", "蘋果");dataset.addValue(100, "上海", "蘋果");dataset.addValue(100, "廣州", "蘋果");dataset.addValue(200, "北京", "梨子");dataset.addValue(200, "上海", "梨子");dataset.addValue(200, "廣州", "梨子");dataset.addValue(300, "北京", "葡萄");dataset.addValue(300, "上海", "葡萄");dataset.addValue(300, "廣州", "葡萄");dataset.addValue(400, "北京", "香蕉");dataset.addValue(400, "上海", "香蕉");dataset.addValue(400, "廣州", "香蕉");dataset.addValue(500, "北京", "荔枝");dataset.addValue(500, "上海", "荔枝");dataset.addValue(500, "廣州", "荔枝");return dataset;}}

         3，產生的圖形：

           還是非常可以的，這裡簡單示範一下，下來還需要根據實際的業務需求，進行選擇，然後進行不同的展示。這些東西需要我們多看網上的一些例子和相應的API文檔，照貓畫虎來進行開發。更多JfreeChart知識請查看：JfreeChart

        這就是在頁面中通過一些圖表進行顯示，又是一種非常友好的頁面。當然可能還有一些其它的外掛程式，這裡就總結一下這兩個，自己感覺還是很好的。