JS图表控件FusionCharts使用教程：使用JavaScript更新图表数据-控件新闻-慧都网

JS图表控件FusionCharts使用教程：使用JavaScript更新图表数据

原创|使用教程|编辑：郝浩|2013-09-06 14:25:25.000|阅读 1579 次

概述：使用FusionCharts的时候，用户可以通过设置简单的JavaScript代码，用于更改图表上的数据。先创建一个简单的图表,然后改变它的数据(请参见下面的代码)。

相关链接：

在使用FusionCharts的时候，用户可以先创建一个简单的图表,然后改变它的数据(请参见下面的代码)。图表最初据显示8月份的销售数据,当用户点击按钮时改为显示9月份的销售数据。每个月都有单独的XML文件,代码如下:

<html>
 <head>
 <title>Update Chart data</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/Column3D.swf", "myChartId", "400", "300", "0", "1" ); 
     myChart.setXMLUrl("AugustData.xml"); 
     myChart.render("chartContainer"); 
     function changeMonth() {
         var chartReference = FusionCharts("myChartId");
         chartReference.setXMLUrl("SeptemberData.xml");
     } 
    //
    -->
 </script>
 <input type="button" onClick="changeMonth();" value="Change Month"> 
</body>
</html>

在上面的代码中,我们使用8月的数据创建了一个图表,数据存在于AugustData.xml文件中。然后创建了一个HTML按钮,用于调用一个JavaScript函数chageMonth()。在这个函数有: