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

    该系列已经完结...以后如果有高级功能,会再开一个新的系列,该系列是比较基础的报表应用..谢谢大家一直的支持. [原创]Devexpress XtraReports 系列 1 创建静态报表 Demo地 ...

  2. 7.XXEinjector：一款功能强大的自动化XXE注射工具

    今天给大家介绍的是一款名叫XXEinjector的漏洞利用工具,XXEinjector是一款基于Ruby的XXE注入工具, 它可以使用多种直接或间接带外方法来检索文件.其中,目录枚举功能只对Java应 ...

  3. Good Bye 2014 B. New Year Permutation（floyd ）

    题目链接 题意:给n个数,要求这n个数字小的尽量放到前面,求一个最小的. 给一个矩阵s[i][j]==1,表示位置 i 的数字可以和 位置 j 的数字交换. 分析: 刚开始用的是3个循环,每次都找一个 ...

  4. js常用知识点汇总

    1.json字符串与json对象相互转化(转至:http://www.jb51.net/article/43136.htm) SON字符串: var str1 = '{ "name" ...

  5. SuperSocket使用 IRequestInfo 和 IReceiveFilter 等对象实现自定义协议

    为什么你要使用自定义协议? 通信协议用于将接收到的二进制数据转化成您的应用程序可以理解的请求. SuperSocket提供了一个内置的通信协议“命令行协议”定义每个请求都必须以回车换行"\r ...

  6. 使用Log4j2，打包后提示ERROR StatusLogger Log4j2 could not find a logging implementation.

    从Log4j切换到Log4j2,没有打包之前日志输出正常,但是打包后总是提示下面内容: 错误一: ERROR StatusLogger Log4j2 could not find a logging ...

  7. linux 内核与用户空间通信机制netlink初探

      1.Linux进程概述 Linux中的进程间通信机制源自于Unix平台上的进程通信机制.Unix的两大分支AT&T Unix和BSD Unix在进程通信实现机制上各有所不同,前者形成了运行 ...

  8. [CentOS7] 常用工具 之 防暴力破解工具 Fail2ban

    防止暴力破解密码: Fail2ban ==> 用于自动ban掉ip 先用yum search fail2ban看看是否yum源含有fail2ban这个package,若没有的话请yum inst ...

  9. Solr 6.7学习笔记（02）-- 配置文件 managed-schema (schema.xml) -- 样例（6）

    managed-schema 样例: <?xml version="1.0" encoding="UTF-8" ?> <!-- License ...

  10. 洛谷P4287 [SHOI2011]双倍回文（回文自动机）

    传送门 听说有大佬用manacher$O(n)$过此题……太强啦…… 说一下PAM的做法吧.(看了题解之后发现)蛮简单的 我们肯定要先建出回文自动机的 然后如果是枚举每一个节点暴跳fail指针肯定得T ...