先创建一个简单的图表,然后改变它的数据(请参见下面的代码)。图表最初据显示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. hadoop job 重要性能参数

    name 说明 mapred.task.profile 是否对任务进行profiling,调用java内置的profile功能,打出相关性能信息 mapred.task.profile.{maps|r ...

  2. java基础题--自我准备

    1.String,StringBuffer,StringBuilder区别---final类型的区别,何时用三者? 2.Vector与ArrayList区别--同步.线程安全.性能.容量扩增大小 3. ...

  3. Umbraco项目发布错误 --More than one type want to be a model for content type authorize

    在开发项目时,解决方案下面包括三个项目 MyUmbracoProject MyUmbracoProject.Core MyUmbracoProject.FrontEnd 第一个项目MyUmbracoP ...

  4. App知识点汇总

    1.Fragment 2.AndroidStudio 用夜神安卓模拟器调试 进入夜神模拟器安装目录下的bin目录,执行nox_adb.exe connect 127.0.0.1:62001,Andro ...

  5. Sharepoint2013商务智能学习笔记之使用Current User Filter筛选Excel 数据(六)

    Sharepoint自带的filter可以和Excel Web Access互动,下面将制作一个Demo,使用Current User Filter根据当前登录用户自动筛选Excel. 第一步,用Ex ...

  6. 【mysql格式化日期】

    date_format(now(),'%Y-%c-%d'): 1. DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据. DATE_FORMAT(date,format) format ...

  7. SqlServer2012-创建表、删除表 增加字段 删除字段操作

    新建表:create table [表名]([自动编号字段] int IDENTITY (1,1) PRIMARY KEY ,[字段1] nVarChar(50) default \'默认值\' nu ...

  8. cf837D(01背包)

    题目链接: http://codeforces.com/contest/837/problem/D 题意: 给出 n 个数, 从中选出 k 个数使得这 k 个数的乘积末尾 0 最多 . 思路: 先记录 ...

  9. 1、kubernetes系统基础190622

    1.容器编排工具 docker编排工具三剑客:docker compose, docker swarm, docker machine IDC的操作系统:mesos 提供容器编排框架:marathon ...

  10. C.0689-The 2019 ICPC China Shaanxi Provincial Programming Contest

    We call a string as a 0689-string if this string only consists of digits '0', '6', '8' and '9'. Give ...