先创建一个简单的图表,然后改变它的数据(请参见下面的代码)。图表最初据显示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. 转：基于InfluxDB&Grafana的JMeter实时性能测试数据的监控和展示

    本文主要讲述如何利用JMeter监听器Backend Listener,配合使用InfluxDB+Grafana展示实时性能测试数据 关于JMeter实时测试数据 JMeter从2.11版本开始,命令 ...

  2. c++中placement new

    c++中的placement new是::operator new的重载版本,用于在已经分配好的内存上创建对象.这样就可以在用户空间对内存进行操作,减少了对象生成的成本,控制对象的地址从而减少内存碎片 ...

  3. 如何使用visual studio 2017创建C语言项目

    使用visual studio 2017创建一个C语言项目,步骤如下: (1)打开Visual Studio 2017环境后出现欢迎界面,如图1所示. 图1  Visual Studio 2017欢迎 ...

  4. 第一个Python工程

    创建你的第一个Python程序 如果你曾经很熟悉visual studio的工作方式.可能对python不习惯. 工程通常只与你使用的IDLE有关系.这些工具习惯将文档,编译,测试集成一体.所以就存在 ...

  5. C++基础之C++编译调试

     C++程序的实现(预处理,编译,连接)Linux平台编译gcc和g++都是GNU的编译器.1.对于.c后缀的文件,gcc把它当做是C程序:g++当做是C++程序:2.对于.cpp后缀的文件,gcc和 ...

  6. iOS模拟器的应用沙盒在MAC中的位置

    每个iOS应用都有自己专属的应用沙盒.分别为 应用程序包 Documents/ Library/Caches/ Library/Preferences/ tmp/ 当运行模拟时,在MAC下找到对应路径 ...

  7. 洛谷P4707 重返现世（扩展MinMax容斥+dp）

    传送门 我永远讨厌\(dp.jpg\) 前置姿势 扩展\(Min-Max\)容斥 题解 看纳尔博客去→_→ 咱现在还没搞懂为啥初值要设为\(-1\)-- //minamoto #include< ...

  8. 用cmd命令来 启动和关闭 SqlServer

    cmd命令 启动and关闭 sql数据库服务 (1)先用以管理员身份打开你的cmd窗口. (2)后输入以下对应的命名. 如下: 启动SQLSERVER NET START MSSQLSERVER 暂停 ...

  9. POJ1036 Gangsters

    题目来源:http://poj.org/problem?id=1036 题目大意: 有N个强盗要进入一家饭店打劫,第i个强盗在Ti时刻到达,会抢到Pi的财产.饭店的门有K+1状态,门打开的程度为[0, ...

  10. 8、kvm虚拟机添加硬盘

    kvm虚拟机添加硬盘qemu-img创建一块新的硬盘 qemu-img create -f qcow2 /kvm-data/kvm/jumperhost_disk1.qcow2 50G 关闭虚拟机 v ...