原創|其它|編輯:郝浩|2012-11-07 15:04:05.000|閱讀 2542 次
概述:鼎鼎有名的Flash圖表組件 FusionCharts 不再僅僅支持Flash,它還可以在不支持Flash Player 的Web瀏覽器(如iPhone/iPad)上創建純JavaScript 圖表(有時也被稱為HTML5/Canvas圖表)。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
鼎鼎有名的Flash圖表組件 FusionCharts 不再僅僅支持Flash,它還可以在不支持Flash Player 的Web瀏覽器(如iPhone/iPad)上創建純JavaScript 圖表(有時也被稱為HTML5/Canvas圖表)。
FusionCharts利用Highcharts庫,最關鍵的是,你無需編寫任何額外的代碼,FusionCharts.js JavaScript類會自動探測不支持Flash的設備,并生成JavaScript圖表。
FusionCharts JavaScript類現在包括四個主要文件:FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js。這四個文件放在Download Pack > Charts folder中。你需要把FusionCharts.js放入網頁中,余下的JavaScript文件就會自動根據FusionCharts.js的指令進行加載。
在不支持Flash Player的地方啟動Flash和JavaScript渲染,示例代碼如下:
<html> <head> <title>My First chart using FusionCharts - Using JavaScript</title> <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> </head> <body> <div id="chartContainer">FusionCharts will load here!</div> <script type="text/javascript"><!-- var myChart = new FusionCharts("FusionCharts/Column2D.swf", "myChartId", "400", "300", "0", "1" ); myChart.setXMLUrl("Data.xml"); myChart.render("chartContainer"); // --> </script> </body> </html>
如果你只想渲染JavaScript圖表,只需添加下面這行代碼:
FusionCharts.setCurrentRenderer('javascript')
這行代碼將詢問FusionCharts渲染器,跳過Flash渲染,直接創建一個純JavaScript圖表。如果你想將這行代碼應用到所有的圖表,你只需在最開始聲明,而不需要在頁面的每個圖表都聲明,示例代碼如下:
<html> <head> <title>My First chart using FusionCharts - Using pure JavaScript</title> <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> </head> <body> <div id="chartContainer">FusionCharts will load here!</div> <script type="text/javascript"><!-- FusionCharts.setCurrentRenderer('javascript'); var myChart = new FusionCharts( "FusionCharts/Column2D.swf", "myChartId", "400", "300", "0", "1" ); myChart.setXMLUrl("Data.xml"); myChart.render("chartContainer"); // --> </script> </body> </html>
效果圖:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件