`
房价会降吗
  • 浏览: 64330 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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

阅读更多

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

最终图表如下所示:

 

 

  • 大小: 20.9 KB
  • 大小: 18.7 KB
分享到:
评论

相关推荐

    用fusioncharts使用json格式数据展示图表

    FusionCharts是一款强大的JavaScript图表库,能够将JSON格式的数据转换为交互式的图表,从而提升数据分析和展示的效果。本文将深入探讨如何利用FusionCharts结合JSON数据来创建图表。 **FusionCharts简介** ...

    fusionCharts是如何在网页呈现图表

    这些类文件不仅用于初始化图表,还提供了丰富的API,允许开发者自定义图表外观、添加事件监听、进行数据更新等操作。在HTML5环境下,这些JavaScript类还能提供Flash的后备支持,确保图表在不支持Flash的设备上也能...

    利用FusionCharts 实现数据图表展示

    FusionCharts是一款强大的JavaScript图表库,它允许开发者创建交互式且富有视觉吸引力的数据可视化图表。在Web应用中,数据图表的展示是传达信息、分析数据和做出决策的关键工具。FusionCharts支持多种图表类型,...

    使用fusioncharts实现数据库的动态数据交互.zip

    标题中的“使用FusionCharts实现数据库的动态数据交互”指的是使用FusionCharts这款JavaScript图表库与数据库进行数据通信,以实现在网页上展示动态、实时的图表数据。FusionCharts是一款强大的图表解决方案,它提供...

    FusionCharts图表组件简单使用

    FusionCharts是一款基于Flash的图表组件,专用于创建动态、交互式的数据可视化图表。这款组件支持多种网页脚本语言,如HTML、.NET、ASP、JSP、PHP、ColdFusion等,并且可以通过XML或JSON作为数据接口来传递数据。...

    fusioncharts图表

    它的API和JavaScript库提供了丰富的功能,如实时数据更新、动画效果、工具提示、点击事件处理等,使用户能够与图表进行深度交互。此外,FusionCharts还兼容大多数Web开发框架,如AngularJS、React、Vue.js等,便于...

    fusioncharts生成图表后导出图片

    标题中的“fusioncharts生成图表后导出图片”指的是使用FusionCharts这个JavaScript图表库来创建可视化图表,并且能够将这些图表导出为图像文件。FusionCharts是一款强大的数据可视化工具,它提供了丰富的图表类型和...

    FusionCharts v3图表 例题

    FusionCharts是一款强大的JavaScript图表库,它允许开发者创建交互式且丰富多彩的图表,适用于Web应用程序。FusionCharts v3是该库的一个版本,提供了多种图表类型,如柱状图、线图、饼图、甘特图等,以及丰富的...

    FusionCharts图表开发(xml数据源)

    FusionCharts是一套JavaScript图表库,支持超过90种不同类型的图表,如柱状图、饼图、线图等。它通过接收数据并将其转换为富媒体图表,使复杂的数据易于理解。FusionCharts的核心优势在于其丰富的图表种类、良好的...

    fusioncharts asp.net 图表控件示例

    FusionCharts是一套JavaScript图表解决方案,支持超过90种图表类型,包括线图、柱状图、饼图、地图等,提供丰富的动画效果和自定义选项。它通过XML或JSON数据格式接收数据,并用HTML5/SVG技术呈现图表,兼容各种...

    js实现图表-FusionCharts

    **FusionCharts是一款强大的JavaScript图表库,用于创建交互式的、动画丰富的数据可视化图表。它支持多种编程语言,包括C#、VB.NET、PHP和JSP,使得开发者在各种后端环境下都能轻松集成图表功能,为业务报表提供直观...

    FusionCharts 非常绚的flash图表

    4. **动态更新**:FusionCharts支持实时数据更新,这意味着图表可以在接收到新数据时自动刷新,这对于实时监控和数据报告场景极为重要。 5. **自定义选项**:开发者可以调整颜色、样式、动画效果等,定制出符合自己...

    Fusioncharts 图表

    FusionCharts是一款功能丰富的JavaScript图表库,用于创建交互式的、可视化数据的2D和3D图表。这款图表框架广泛应用于数据分析、报告制作、网站开发、应用程序界面设计等多个领域。FusionCharts支持多种图表类型,...

    FusionCharts使用源码例C#

    FusionCharts是一款强大的JavaScript图表库,它提供了丰富的交互式图表,可用于展示数据的可视化效果。在C#开发环境中,FusionCharts可以与ASP.NET、WinForms或其他.NET框架结合使用,为应用程序添加美观的数据呈现...

    FusionCharts+asp.net+sqlserver生成图表

    FusionCharts是一款强大的JavaScript图表库,能够帮助开发者轻松地创建交互式的图表。在这个实例中,我们将深入探讨如何利用FusionCharts与asp.net和SQL Server相结合,来从数据库中获取数据并生成图表。 首先,`...

    FusionCharts 下钻和单击图上某个节点调用js函数

    FusionCharts是一款强大的JavaScript图表库,它提供了丰富的可视化图表类型,用于展示各种复杂的数据。在本文中,我们将探讨如何利用FusionCharts实现下钻功能以及单击图表节点调用JavaScript函数。 1. **从JSONURL...

    可用于json数据加载的fusionCharts

    FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者创建出美观、交互丰富的数据可视化图表。在给定的压缩包文件中,重点在于FusionCharts支持JSON数据格式的加载,这在许多现代Web应用中是非常重要的,...

    FusionCharts的Javascript和SWF文件

    FusionCharts是一款强大的数据可视化工具,它通过JavaScript和SWF(Shockwave Flash)文件来创建交互式的图表和图形。在本资源中,你将找到FusionCharts用于报表统计的必要组件,包括SWF对象和JavaScript库。下面...

    FusionCharts图表制作插件

    3. **初始化图表**:使用JavaScript创建一个图表对象,设置其类型、宽度、高度、数据源等属性。 4. **渲染图表**:在HTML页面的适当位置调用图表对象的`render()`方法,将图表渲染到页面上。 5. **交互与更新**:...

Global site tag (gtag.js) - Google Analytics