FusionCharts使用JavaScript:
FusionCharts允許用戶創建建立JavaScript圖表(也就是web上的HTML5 /Canvas圖表)。這個特性允許用戶在不支持Flash播放器的web瀏覽器上創建圖表,如iPhone / iPad。FusionCharts內部利用Highcharts庫生成JavaScript圖表。
這個功能能夠無縫地使用當前的FusionCharts實現模式。不需要任何額外的代碼來實現。FusionCharts的JavaScript類自動檢測不支持Flash的設備,並創建JavaScript圖表。你也可以忽略Flash,並只使用JavaScript生成圖表。
FusionCharts是如何工作的:
FusionCharts XT提供一個全新的FusionCharts JavaScript類。 FusionCharts的JavaScript類現在包括四個主要文件:FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js和jquery.min.js。這四個文件存在於Download Pack > Charts folder。
用戶有可能只需要在web頁面中包括FusionCharts.js(當時注意,也需要複製其他文件到你的web應用程序)。其餘的JavaScript文件將通過FusionCharts.js自動加載按需。
一旦FusionCharts確定設備中沒有可用的Flash player,它將自動切換渲染模式爲JavaScript。如果你希望JavaScript渲染圖表作爲默認設置,也可以通過代碼進行設置。
讓我們來看看在Flash和JavaScript渲染都可用的情況下,只有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渲染圖表:
如果只希望渲染JavaScript圖表,那麼就使用如下代碼:
FusionCharts.setCurrentRenderer('javascript')
這段代碼會讓FusionCharts渲染器跳過Flash渲染並創建純JavaScript圖表。
這個設置可以應用到所有的渲染圖表。因此,如果一開始開始就使用,該頁面的所有圖表都將使用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>
》》》FusionCharts最新版下載地址