JS圖表控件FusionCharts使用教程：如何使用JavaScript渲染iPhone/iPod/iPad圖表
FusionCharts使用JavaScript:
FusionCharts XT允許用戶創(chuàng)建建立JavaScript圖表(也就是web上的HTML5 /Canvas圖表)。 這個(gè)特性允許用戶在不支持Flash播放器的web瀏覽器上創(chuàng)建圖表,如iPhone / iPad。FusionCharts內(nèi)部利用Highcharts庫(kù)生成JavaScript圖表。
這個(gè)功能能夠無(wú)縫地使用當(dāng)前的FusionCharts實(shí)現(xiàn)模式。不需要任何額外的代碼來(lái)實(shí)現(xiàn)。FusionCharts的JavaScript類自動(dòng)檢測(cè)不支持Flash的設(shè)備，并創(chuàng)建JavaScript圖表。你也可以忽略Flash，并只使用JavaScript生成圖表。
FusionCharts是如何工作的：
FusionCharts XT提供一個(gè)全新的FusionCharts JavaScript類。 FusionCharts的JavaScript類現(xiàn)在包括四個(gè)主要文件:FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js和jquery.min.js。這四個(gè)文件存在于Download Pack > Charts folder。
用戶有可能只需要在web頁(yè)面中包括FusionCharts.js(當(dāng)時(shí)注意,也需要復(fù)制其他文件到你的web應(yīng)用程序)。其余的JavaScript文件將通過(guò)FusionCharts.js自動(dòng)加載按需。
一旦FusionCharts確定設(shè)備中沒(méi)有可用的Flash player,它將自動(dòng)切換渲染模式為JavaScript。如果你希望JavaScript渲染圖表作為默認(rèn)設(shè)置,也可以通過(guò)代碼進(jìn)行設(shè)置。
讓我們來(lái)看看在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')
這段代碼會(huì)讓FusionCharts渲染器跳過(guò)Flash渲染并創(chuàng)建純JavaScript圖表。
這個(gè)設(shè)置可以應(yīng)用到所有的渲染圖表。因此,如果一開(kāi)始開(kāi)始就使用,該頁(yè)面的所有圖表都將使用JavaScript進(jìn)行渲染。用戶無(wú)需對(duì)頁(yè)面中的每個(gè)圖表都單獨(dú)進(jìn)行設(shè)置。
修改后的代碼如下：
<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>
》》》免費(fèi)下載FusionCharts最新版
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線