欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用FusionCharts创建可更新数据的JavaScript图表

程序员文章站 2022-06-04 22:32:34
...

先创建一个简单的图表,然后改变它的数据(请参见下面的代码)。图表最初据显示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()。 在这个函数有:

使用FusionCharts(“myChartId”)追踪图表

使用setXMLData()函数更新图表

传递包含9月份数据的"SeptemberData.xml"文件到setXMLData()

最终图表如下所示:
使用FusionCharts创建可更新数据的JavaScript图表 
            
    
    博客分类: FusionCharts FusionChartsFlashJavaScript图表控件
 
使用FusionCharts创建可更新数据的JavaScript图表 
            
    
    博客分类: FusionCharts FusionChartsFlashJavaScript图表控件
 

  • 使用FusionCharts创建可更新数据的JavaScript图表 
            
    
    博客分类: FusionCharts FusionChartsFlashJavaScript图表控件
  • 大小: 20.9 KB
  • 使用FusionCharts创建可更新数据的JavaScript图表 
            
    
    博客分类: FusionCharts FusionChartsFlashJavaScript图表控件
  • 大小: 18.7 KB