文档章节

如何使用JavaScript更新图表数据

咲晚杍
 咲晚杍
发布于 2013/09/29 10:29
字数 259
阅读 223
收藏 10

在使用FusionCharts的时候,用户可以先创建一个简单的图表,然后改变它的数据(请参见下面的代码)。图表最初据显示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()

最终图表如下所示:



本文转载自:http://www.evget.com/zh-CN/Info/catalog/19560.html

咲晚杍
粉丝 7
博文 75
码字总数 8143
作品 0
渝中
私信 提问
加载中

评论(1)

贤胜
贤胜
你好,我最近在做fusioncharts图表, 图表钻取到图表的功能,用linkedCharts 实现的,APi只有从前台写死的那种 。没有前后台交互的,可否指点一二
FusionCharts常见问题FAQ及解决方法(FusionCharts 100问)

当你利用FusionCharts创建图表时报错,原因是多方面的。本文总结了一些常见问题及解决方法供大家参考,希望对大家有帮助。 FusionCharts 设置字体大小 FusionCharts服务器要求有要求吗? 如何...

flyingsnail
2014/04/25
2.5K
0
amCharts 3.9.0 地图和图表版本号终于同步了

一直觉得amCharts的图表和地图更新都差不多,可是版本号却是不同的,有点奇异,现在场上终于醒悟了。 下面是厂商的公告及更更新内容(原文): amCharts所有产品: JavaScript Charts & Java...

咲晚杍
2014/05/29
347
0
Recording - TradingView从入门到放弃

一、Charting Library是什么 具有开放数据API并可下载的图表控件。这是一个独立的解决方案,您可以下载,托管在您的服务器上,连接您自己的数据,并在您的网站/应用程序中免费使用。 中文文档...

Touch_Fish
07/17
0
0
Github 上 10 个最流行的数据可视化项目

1. D3 Stars: 46561, Forks: 12465 D3 是一个JavaScript数据可视化库用于HTML和SVG。它旨在将数据带入生活,强调Web标准,将强大的可视化技术与数据驱动的文档对象模型(DOM)操作方法相结合...

pe_mail2006
2016/11/24
16.1K
2
Highcharts实现实时数据处理方法

我们使用highcharts设置实况图,在图表被配置对象定义后,可选预处理和最终启用,以及渲染会使用新的Highcharts.Chart()。我们可以使用 API修改图表。图表、轴、系列以及点对象会有一系列方式...

小白兔灰太狼
2014/05/26
4.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

查看线上日志常用命令

cat 命令(文本输出命令) 通常查找出错误日志 cat error.log | grep 'nick' , 这时候我们要输出当前这个日志的前后几行: 显示file文件里匹配nick那行以及上下5行 cat error.log | grep -C ...

xiaolyuh
17分钟前
3
0
六、Java设计模式之工厂方法

工厂方法定义: 定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类,工厂方法让类的实例化推迟到子类中进行 类型:创建型 工厂方法-使用场景: 创建对象需要大量重复的代码 ...

东风破2019
23分钟前
2
0
win服务器管理遇到的一系列问题记录

有些小伙伴在使用iis7远程桌面管理工具的时候总是会遇到一系列的问题,下面就是为大家介绍一下服务器日常管理过程中出现的问题及我的解决办法和心得。希望能帮到大家。   拒绝服务器重新启...

1717197346
31分钟前
2
0
flutter 剪切板 复制粘贴

复制粘贴功能 import 'package:flutter/services.dart'; Clipboard.setData(ClipboardData(text:_text));Clipboard.getData;...

zdglf
33分钟前
3
0
如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题?

面试题 如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题? 面试官心理分析 这个是肯定的,用 MQ 有个基本原则,就是数据不能多一条,也不能少一条,不能多,就是前面说的重复消费...

米兜
34分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部