隨著移動終端的屏幕愈來愈大，顯示效果和分辨率穩(wěn)步提升，因此，在移動終端上進行報表展示逐漸可行。

本次來討論一下移動終端上的報表展示，以Android為例，也不僅僅局限于Android，稍后會有Windows Phone 7.1上的預(yù)覽效果。

測試代碼下載

一、Fusion Charts

Fusion Charts是一個非常有名的Flash報表組件，功能強大，提供了豐富的API。官方主頁：http://www.fusioncharts.com/

旗下產(chǎn)品線包括：

FusionCharts：企業(yè)級報表解決方案

FusionWidgets：主要提供一些儀表盤報表

FusionMaps：提供動態(tài)的、數(shù)據(jù)驅(qū)動的地圖

PowerCharts：提供面向特定領(lǐng)域的、專業(yè)的報表

本次使用FusionCharts來做一個簡單的報表，測試在手機上的預(yù)覽效果。

1.1、首先從官網(wǎng)上下載最新版本的Fusion Charts

1.2、使用VS2010建立一個ASP.NET項目，使用的.NET Framework 4.0，將Fusion Charts所包含的swf和js文件復(fù)制到項目里：

1.3、測試一個官方文檔中的示例：Using JavaScript (HTML5) renderer，使用JavaScript或HTML來輸出Flash報表。

引用FusionCharts的js：

<script src="FusionCharts/FusionCharts.js" type="text/javascript"></script>

1.4、使用官方提供的測試數(shù)據(jù)Data.xml：

    <script type="text/javascript">
										

        var myChart = new FusionCharts("FusionCharts/Column3D.swf",

                    "myChartId", "400", "300", "0", "1");

        myChart.setXMLUrl("SampleData/Data.xml");

        myChart.render("chartContainer");

    </script>
								

1.5、使用IIS 7.5發(fā)布網(wǎng)站，預(yù)覽：

1.6、下面在手機上預(yù)覽效果，啟用Wifi，注意確保安裝了Adobe Flash Player。

原生瀏覽器：

Firefox Mobile 4(不支持Flash)：

Opera Mobile 11：

最后來一張Windows Phone 7.1 Mango模擬器的效果圖（同樣悲劇的不支持Flash）。

暫且稱為IE 9 Mobile：

二、RGraph

RGraph是一個基于HTML5 Canvas的項目，使用JavaScript操作Canvas來顯示報表，不依賴任何第三方插件。也就是說，如果瀏覽器支持HTML5和JavaScript，就可以顯示。

2.1、官方主頁：http://www.rgraph.net/，注意該項目在非商業(yè)使用上免費，若商業(yè)使用則需要付費，具體細(xì)節(jié)請查閱其RGraph license。

2.2、下載RGraph的最新穩(wěn)定版，將其所需的js復(fù)制到項目里：

2.3、下面測試一下官方的示例Pie3D，引用所需的js：

    <script type="text/javascript" src="../Scripts/RGraph/RGraph.common.core.js"></script>
															

    <script type="text/javascript" src="../Scripts/RGraph/RGraph.common.annotate.js"></script>
															

    <script type="text/javascript" src="../Scripts/RGraph/RGraph.common.context.js"></script>
															

    <script type="text/javascript" src="../Scripts/RGraph/RGraph.common.tooltips.js"></script>
															

    <script type="text/javascript" src="../Scripts/RGraph/RGraph.common.zoom.js"></script>
															

    <script type="text/javascript" src="../Scripts/RGraph/RGraph.common.resizing.js"></script>
															

    <script type="text/javascript" src="../Scripts/RGraph/RGraph.pie.js"></script>
															

2.4、Body里放一個Canvas，用來顯示報表：

    <div style="text-align: center">
												

        <canvas id="pie1" width="450" height="300" style="border: 1px dashed gray">[No canvas support]</canvas>
																									

    </div>
								

2.5、使用js來操作Canvas：

    <script type="text/javascript">
										

        window.onload = function () {

            /**

            * These are not angles - these are values. The appropriate angles are calculated

            */
					

            var pie1 = new RGraph.Pie('pie1', [54.27, 21.71, 12.52, 7.28, 2.03, 2.19]); // Create the pie object
												

            pie1.Set('chart.labels', ['IE (54.27%)', 'Firefox (21.71%)', 'Chrome (12.52%)', 'Safari (7.28%)', 'Opera (2.03%)', 'Other (2.19%)']);

            pie1.Set('chart.gutter', 30);

            pie1.Set('chart.title', "Browsers (tooltips)");

            pie1.Set('chart.shadow', false);

            pie1.Set('chart.tooltips.effect', 'fade');

            pie1.Set('chart.tooltips.event', 'onmousemove');

            pie1.Set('chart.tooltips', [

                                        'IE (54.27%)',

                                        'Firefox (21.71%)',

                                        'Chrome (12.52%)',

                                        'Safari (7.28%)',

                                        'Opera (2.03%)',

                                        'Other (2.19%)'
						

                                       ]

                                      );

            pie1.Set('chart.highlight.style', '3d'); // Defaults to 3d anyway; can be 2d or 3d
										

            if (!RGraph.isIE8()) {

                pie1.Set('chart.zoom.hdir', 'center');

                pie1.Set('chart.zoom.vdir', 'up');

                pie1.Set('chart.labels.sticks', true);

                pie1.Set('chart.labels.sticks.color', '#aaa');

            }

            pie1.Set('chart.linewidth', 5);

            pie1.Set('chart.labels.sticks', true);

            pie1.Set('chart.strokestyle', 'white');

            pie1.Draw();

        }

    </script>
								

展示一下截止2011年5月份各大瀏覽器的市場占有率分布圖，引自谷奧：http://guao.cc/MUh

部署到IIS后，運行：

2.6、下面在手機上預(yù)覽效果

原生瀏覽器：

Firefox Mobile 4：

Opera Mobile 11：

最后也來一張Windows Phone 7.1 Mango模擬器的效果圖。

暫且稱為IE 9 Mobile：

測試結(jié)果有些出人意料，HTML5的支持程度非常好，反倒是Flash不怎么樣。長遠(yuǎn)來看，HTML5 + JavaScript是趨勢，雖然目前的顯示效果離桌面瀏覽器還有不小的差距，期待承載了萬千期望的HTML5，早日成為標(biāo)準(zhǔn)吧。

我沒有蘋果的設(shè)備，故無法測試Safari Mobile的顯示效果，相信憑借蘋果對HTML5的支持程度，不用擔(dān)心了。

小結(jié)：

本次只是使用了兩個框架對移動終端瀏覽器的支持程度做了一個簡易的測試，對于移動終端的報表展示來說，還是首選HTML5 + JavaScript。RGraph是一個純HTML5輸入的框架，非常期待其后續(xù)發(fā)展及授權(quán)協(xié)議。

其他相似的框架還有：

Sencha Touch，官方主頁：http://www.sencha.com/products/touch/，由收購了ExtJS的Sencha公司開發(fā)，號稱是第一個HTML5 Web 應(yīng)用框架，目前以GPL v3 協(xié)議授權(quán)。

The-M-Project，官方主頁：http://www.the-m-project.org/，以對商業(yè)應(yīng)用更為友好的MIT授權(quán)，跨移動平臺，主要特性：

• MVC
• HTML5
• JavaScript-all development cycle
• Offline support (automatic cache manifest generation)
• Rich User Interfaces
• DataProvider for local and remote storage persistence
• Internationalization (i18n)
• Open Source (MIT License)
• NodeJS based build tools (called Espresso)

以后有時間會測試一下這兩個項目，若你有其他方案，歡迎討論。