`
zzc1684
  • 浏览: 1229466 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

JS图表控件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()。 在这个函数有:

  • 使用FusionCharts(“myChartId”)追踪图表
  • 使用setXMLData()函数更新图表
  • 传递包含9月份数据的"SeptemberData.xml"文件到setXMLData()

最终图表如下所示:

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

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

分享到:
评论

相关推荐

    FusionCharts图表控件中文版使用手册.doc

    《FusionCharts图表控件中文版使用手册》是针对初学者设计的一份详细教程,旨在帮助用户快速掌握这款强大的图表工具。FusionCharts是一款流行的JavaScript图表库,它能够以丰富的互动性和美观的视觉效果呈现数据。 ...

    FusionCharts图表控件中文版使用手册定义.pdf

    《FusionCharts图表控件中文版使用手册定义》是一份详细介绍如何使用FusionCharts图表控件的网络文档。FusionCharts是一款强大的图表生成工具,它能够帮助开发者创建丰富的交互式图表,广泛应用于数据分析和可视化...

    FusionCharts图表控件中文版使用手册

    中文版使用手册旨在提供全面的指导,帮助用户更轻松地理解和使用这款图表控件。 首先,FusionCharts的核心组成部分包括三个要素: 1. SWF动画文件:这是FusionCharts的基础,包含预定义的图表类型和交互行为。这些...

    js实现图表-FusionCharts

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

    FusionCharts图表控件中文版使用手册下载

    - **结合JavaScript的应用**:使用JavaScript可以实现更多交互功能,如动态加载数据、响应用户事件等。 - **热点链接**:通过`link`属性设置,为图表元素添加链接,用户点击时触发指定动作。 - **图表数据导出**...

    JSP下操作图形控件FusionCharts

    **JSP下操作图形控件FusionCharts** FusionCharts是一款强大的JavaScript图表库,它可以用于在Web应用中创建丰富的交互式图表。在Java Server Pages (JSP)环境中使用FusionCharts,可以为开发者提供便捷的方式来...

    Android上,使用FusionCharts进行图表控件封装

    在Android平台上,FusionCharts是一款强大的...通过以上步骤,你可以在Android应用中成功地集成和封装FusionCharts图表控件,实现数据的可视化展示。记住,良好的代码组织和适当的优化可以提高应用的性能和用户体验。

    fusioncharts asp.net 图表控件示例

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

    非常好用的图标控件FusionCharts

    FusionCharts是一款强大的图表控件,专为开发者设计,用于创建引人入胜、交互式的数据可视化效果。这款工具在IT行业中备受推崇,因为它提供了丰富的图表类型和灵活的定制选项,使得即便是非专业的数据可视化专家也能...

    FusionCharts图表控件中文版使用手册整理.pdf

    本文将深入探讨FusionCharts图表控件的中文版使用手册,包括其核心组成部分、各种功能以及如何有效地利用它们。 首先,我们要了解FusionCharts的三大基本元素:SWF动画文件、XML数据文件和承载图表的载体。SWF文件...

    FusionCharts 图表控件

    综上所述,FusionCharts图表控件是一个功能强大、灵活易用的数据可视化工具,广泛应用于多个领域,为开发人员提供了便捷的方式来展示和解析复杂数据。无论是初学者还是经验丰富的开发者,都能从中受益。通过学习和...

    FusionCharts 18个常用控件教程(含json格式和xml格式)

    FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者创建出互动性强、视觉效果丰富的图表。本教程涵盖了FusionCharts的18个常用控件,旨在帮助用户深入理解和应用这些控件,无论是对于数据可视化的需求还是...

    js图形展示控件 饼图 fusioncharts jfcharts jfchart

    本篇文章将详细探讨“js图形展示控件”中的饼图实现,特别是融合了FusionCharts、JFCharts和JFChart这三款JavaScript库的用法。 首先,FusionCharts是一款强大的JavaScript图表库,它支持超过90种图表类型,包括...

    FusionCharts使用源码例C#

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

    FusionCharts很炫的swf图表控件

    2. **SWF图表控件** SWF是Adobe Flash Player支持的文件格式,FusionCharts通过SWF文件实现图表的显示。这种方式使得图表在视觉效果上有出色的表现力,同时保持了良好的浏览器兼容性。 3. **文件名称解析** - `...

    FusionCharts在Android上的实现

    FusionCharts是一款强大的数据可视化工具,它通过JavaScript库来创建交互式、丰富的图表和图形。在Android平台上实现FusionCharts,可以为移动应用提供生动的数据展示功能,帮助用户更好地理解和分析数据。以下将...

    javascript图形控件

    1. 数据绑定:将数据源与图表元素关联,确保数据更新时图表自动更新。 2. 样式和颜色:自定义图表的颜色方案,以匹配网页设计或突出特定数据点。 3. 交互性:添加鼠标悬停提示、点击事件等交互功能,增强用户体验。 ...

    C#网站里面使用fusionCharts显示统计数据表格

    FusionCharts是一个JavaScript图表库,它依赖于服务器端生成的XML数据来绘制图表。这个XML数据包含了图表的各种属性,如标题、图例、颜色、数据等。在C# ASP.NET应用中,我们可以使用后台代码生成这种XML,然后传递...

Global site tag (gtag.js) - Google Analytics