FusionChart 的javascript 用法

来源:互联网 发布:mac触碰板 编辑:程序博客网 时间:2024/05/16 10:26

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>

 

以上是从晚上找的一个简单的实现原理,具体的可在根据自己的情况在调整

原创粉丝点击