先创建一个简单的图表,然后改变它的数据(请参见下面的代码)。图表最初据显示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. win7中配置eclipse连接Ubuntu内的hadoop

    Hadoop java 分布式 云计算 数据库 目录[-] 1.设置Ubuntu静态IP: 1)配置网卡参数到interfaces文件: 2)重启网卡: 2.配置Ubuntu的hosts: 3.配置V ...

  2. hdu1062

    #include<stdio.h> #include<string.h> int main() { int i,n,len,j,k,t; char s1]; scanf(&qu ...

  3. jquery ajax + struts2用例

    ajax var url = '/itsm/contract/contract!deleteShopItemById.action'; var shopItemId= selectRows[x].da ...

  4. cinder服务状态up/down的源码梳理

    基于ocata版本的,源码梳理 1)用户输入cinder service-list命令行,查看cinder服务的状态时,cinder的入口函数为cinder/api/contrib/services. ...

  5. uva1610 聚会游戏（细节处理）

    uva1610 聚会游戏(细节处理) 输入一个n(n<=1000且为偶数)个字符串的集合D,找一个长度最短的字符串(不一定要在D中出现)S,使得D中恰好一半字符串小于等于S,另一半大于S.如果有 ...

  6. Python使用Zero-Copy和Buffer Protocol实现高性能编程

    无论你程序是做什么的,它经常都需要处理大量的数据.这些数据大部分表现形式为strings(字符串).然而,当你对字符串大批量的拷贝,切片和修改操作时是相当低效的.为什么? 让我们假设一个读取二进制数据 ...

  7. 高斯消元法的C++简单实现

    高斯消元法 首先,我们导入几个概念. 定义1: 一个矩阵称为阶梯形(行阶梯形),若它有以下三个性质: 1.每一非零行在每一零行之上: 2.某一行的先导元素所在的列位于前一行先导元素的后面: 3.某一行 ...

  8. layui的tree和form并没有冲突！无限级tree下拉列表和select下拉列表同一页使用！

    在昨天写的随笔中: layui的tree和form同时引用出现冲突的粗略解决办法 https://www.cnblogs.com/xwma/p/10900975.html 提出有冲突,今天在开发中发现 ...

  9. Oracle 11g 数据类型

    1.     字符类型 数据类型 长度 说明 CHAR(n BYTE/CHAR) 默认1字节,n值最大为2000 末尾填充空格以达到指定长度,超过最大长度报错.默认指定长度为字节数,字符长度可以从1字 ...

  10. code和pre竟然有区别！！！！

    坑爹的,今天复习基础,本来写了个获取样式,为了显示出我的代码,才发现了 code和pre标签竟然是不同的. 1.用 JS 的代码注释风格来说 code 就是 // , <pre> 就是 / ...