FusionChart 的javascript 用法

最新推荐文章于 2019-07-11 13:30:52 发布

原创最新推荐文章于 2019-07-11 13:30:52 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #input #div #graph #function

本文介绍了一种使用FusionCharts生成动态图表的方法，并提供了一个JavaScript实现的例子。通过改变SWF文件，可以轻松地更新图表类型。

FusionChart 就不用介绍了把，一款支持多种语言的图表生成控件，生成的图表丰富，美观，且有动态感，因为它生存的东西就是一个flash。一下介绍一下它的javascript 实现方式把。

废话少说，直接上实例

<HTML>　　　　　　
　　 <HEAD>　　　　　　
　　　　　 <SCRIPT LANGUAGE="Javascript" SRC="js/FusionCharts.js"></SCRIPT>　　　　　　
　　　　　 <SCRIPT LANGUAGE="JavaScript">　　　　　　
　　　　　　　　 //数据　　
var strXML = "<graph caption='Hours worked' showNames='1'> <set name='Tom' value='32' color='AFD8F8'/><set name='Mary' value='16' color='F6BD0F'/><set name='Jane' value='42' color='8BBA00'/></graph>";　　　　　　　
　　　　
　　　　　　　　　　　　　　　 /**//*　　　　　　　
　　　　　　　　 * 当用户单击按钮时调用这个方法。　　　　　　　
　 * 这个方法用来使用新的SWF文件创建一个新的FusionCharts实例。　　　　　　　
　　　　　　　　 */　　　　　　　
　　　　　　　　 function updateChart(chartSWF){　　　　　　　
　　　　　　　　　　　 //Create another instance of the chart.　

　　　　　　　　　　　 var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0");　　　　　　　　
　　　　　　　　　　　 chart1.setDataXML(strXML);　　　　　　　
　　　　　　　　　　　 chart1.render("chart1div");　　　　　　　
　　　　　　　　 }　　　　　　　
　　　　　 </SCRIPT>　　　　　　
　　 </HEAD>　　　　　　
<BODY>　　　　　　
　　 <div id="chart1div">　　　　　　
　　 FusionCharts　　　　　　　
　　 </div>　　　　　　
　　 <script language="JavaScript">　
　　
　　　　　
　　　　　 var chart1 = new FusionCharts("functionchart/Column3D.swf", "chart1Id", "400", "300", "0", "0");　　　　　　　
　　　　　 chart1.setDataXML(strXML);　　　　　　　
　　　　　 chart1.render("chart1div");　　
　　　　　
　　 </script>　　　　　　
　　　　　　
　　 <form name='frmUpdate'>　　　　　　
　　 Show as:　　　　　　　　
　　　　　 <input type='button' value='Column' onClick="javaScript:updateChart('functionchart/Column3D.swf');" name='btnColumn' />　　　　　　　　
　　　　　 <input type='button' value='Line' onClick="javaScript:updateChart('functionchart/Line.swf');" name='btnLine' />　　　　　　　　
　　　　　 <input type='button' value='Pie' onClick="javaScript:updateChart('functionchart/Pie3D.swf');" name='btnPie' />　　　　　　　　
</form>　　　　　　
　　 </CENTER>　　　　　　
</BODY>　　　　　　
</HTML>