鼎鼎有名的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>
效果图: