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

使用FusionCharts创建可更新数据的JavaScript图表的更多相关文章

  1. 实时更新数据的jQuery图表插件DEMO演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 开源的数据可视化JavaScript图表库：ECharts

    ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...

  3. Salesforce LWC学习(三十五) 使用 REST API实现不写Apex的批量创建/更新数据

    本篇参考: https://developer.salesforce.com/docs/atlas.en-us.224.0.api_rest.meta/api_rest/resources_compo ...

  4. 常用sql语句总结（二）（更新数据,序列,创建数据表,约束,注释）

    常用sql语句总结(二)(更新数据,序列,创建数据表,约束,注释) 一. 增 INSERT INTO 数据表(字段,字段,-) VALUES(值,值-); INSERT INTO emp(empno, ...

  5. MySQL视图-(视图创建，修改，删除，查看，更新数据)

    视图是一种虚拟存在的表,对于使用视图的用户来说基本上是透明的.视图并不在数据库中实际存在,行和列数据来自定义视图的查询总使用的表,并且是在使用视图时动态生成的. 视图相对于普通表的优势: 简单:使用视 ...

  6. SQL Server通过创建临时表遍历更新数据

    前言: 前段时间新项目上线为了赶进度很多模块的功能都没有经过详细的测试导致了生成环境中的数据和实际数据对不上,因此需要自己手写一个数据库脚本来更新下之前的数据.(线上数据库用是SQL Server20 ...

  7. 【212】HDF更新数据&HDF创建

    HDF更新数据:对原有HDF数据进行数据更新,不破坏HDF的数据结构 pro add_data_sst ;实现将SST增加1度,再将结果更新到SST中 ;1. 获取SST索引 ;2. 通过索引获取ID ...

  8. 2018年最佳JavaScript数据可视化和图表库

    现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...

  9. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

随机推荐

  1. 通过HBase Shell与HBase交互

    出处:http://www.taobaotest.com/blogs/1604 业务开发测试HBase之旅二:通过HBase Shell与HBase交互 yedu 发表于:2011-10-11 浏览: ...

  2. R语言系列：数据的基本运算

    基本运算符号  1.基本数学计算  +.-.*./.^.%%(求模).%/%(整除)  注意:求模运算两边若为小数,则整数和小数部分分别求模.例:5.6%%2.2  2.比较运算  >.< ...

  3. spider（一）

    此爬虫内容无架构: 1.URL管理器:用集合,mysql表,缓存等 2.网页下载器:实现网页下载, urllib2:官方基础模块 requests:三方的(更强):伪装成浏览器访问,代理登录,http ...

  4. CF1041F Ray in the tube

    挂上Chester大神的解题报告 有一个思维跳跃的地方,就是不应该枚举所有的$B$点,而是应该在选定一个$A$点之后枚举距离计算. 然后我们发现枚举距离是$2^k$的长度就可以了,证明如下: 假如距离 ...

  5. Coding CTO 孙宇聪：《人，技术与流程》

    我先做一下自我介绍,我是 07 年加入的 Google,在 Moutain View 总部任Google SRE,今年年初回国加入 Coding . 在 Google 我参与了两个 Project, ...

  6. 3.Windows应急响应：蠕虫病毒

    0x00 前言 蠕虫病毒是一种十分古老的计算机病毒,它是一种自包含的程序(或是一套程序),通常通过网络途径传播, 每入侵到一台新的计算机,它就在这台计算机上复制自己,并自动执行它自身的程序.常见的蠕虫 ...

  7. 1、jquery_属性和选择器

    1.ID选择器 2.attr和val和removeattr 3.attr和removeattr和val <html> <head> <meta charset=" ...

  8. python sys.sdout.write 和print 区别

    sys.sdout.write 标准输入相当于“%value%”,输出内容没有空格,而print输出带有空格,举个例子 用sys.sdout.write: import sys for i in ra ...

  9. cogs 2123. [HZOI 2015] Glass Beads

    2123. [HZOI 2015] Glass Beads ★★★   输入文件:MinRepresentations.in   输出文件:MinRepresentations.out   简单对比时 ...

  10. 2017-10-20 NOIP模拟赛

    Lucky Transformation #include<iostream> #include<cstring> #include<cstdio> using n ...