使用FusionCharts创建可更新数据的JavaScript图表

maple00 2013-09-06

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

maple00

maple00

相关推荐

最值得信赖的JavaScript图表工具！别说你还不知道FusionCharts

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.

xiaoge00 / 0评论 2019-10-30

JS图表控件FusionCharts使用教程：如何使用JavaScript渲染iPhone/iPod/iPad图表

FusionCharts XT允许用户创建建立JavaScript图表。这个特性允许用户在不支持Flash播放器的web浏览器上创建图表,如iPhone / iPad。FusionCharts内部利用Highcharts库生成JavaScript图表。这个

huanglianhuabj00 / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：使用JavaScript渲染图表（不用Flash）

在使用FusionCharts的时候，如果用户希望只使用JavaScript建立图表,你那么就需要添加另一行代码，如下所示:. 这段代码会使FusionCharts渲染器跳过Flash渲染，并创建纯基于JavaScript的图表。<title>

gufeijunchi / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：为JavaScript图表提供数据

FusionCharts的JavaScript类提供了一系列的函数来提供图表数据。FusionCharts的JavaScript类支持XML或JSON格式的数据。这些数据可以是URL或字符串。在上面的代码中,图表数据来源于一个外部XML文件，该文件提供的U

Blovesea / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：使用JavaScript更新图表数据

在使用FusionCharts的时候，用户可以先创建一个简单的图表,然后改变它的数据。图表最初据显示8月份的销售数据,当用户点击按钮时改为显示9月份的销售数据。每个月都有单独的XML文件,代码如下:. 然后创建了一个HTML按钮,用于调用一个JavaScr

JavaJspSsh / 0评论 2014-11-13

FusionCharts使用教程：利用HTML表单数据渲染图表

本文中，我们将利用HTML表单数据渲染FusionCharts图表。接下来，我们将构建一个简单的餐厅销售的例子，由专人输入餐厅每天所出售的食物。我们将获得这些餐厅销售数据，并绘制图表。本文所涉及的示例代码可以在FusionCharts试用版中获取。用户在输

STPace / 0评论 2014-11-10

FusionCharts中文教程：自定义图表——数据标签

数据标签指显示在图表的X轴的数据点的名称。FusionCharts提供5种不同的显示模式。用于设置数据标签显示模式的属性如下表所示：。5种可供选择的选项：auto、wrap、stagger、rotate或none。在该模式下图表自动选择合适的数据标签显示模

shanhuijava / 0评论 2015-12-25

FusionCharts HelloWorld(2)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>. <!DOCTYPE HTML PUBL

二毛妮子 / 0评论 2015-01-20

FusionCharts使用教程：在PHP程序中创建JavaScript图表

绝大多数图表控件都可用于PHP应用程序，其中大部门是服务器端组件，无需任何交互即可生成图表和仪表的静态图像，而一些客户端图表组件则需要借助于JavaScript来生成交互式图表、仪表和网格。FusionCharts为PHP开发者提供了服务器端库，开发人员无

xiaocaibai / 0评论 2014-11-15

JS图表控件FusionCharts使用教程：如何使用JavaScript渲染iPhone/iPod/iPad图表

不需要任何额外的代码来实现。FusionCharts的JavaScript类自动检 测不支持Flash的设备，并创建JavaScript图表。FusionCharts是如何工作的：FusionCharts XT提供一个全新的FusionCharts Jav

NONINETEEN / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：使用JavaScript渲染图表（不用Flash）

在使用FusionCharts的时候，如果用户希望只使用JavaScript建立图表,你那么就需要添加另一行代码，如下所示:. <title>My First chart using FusionCharts - Using pure Java

shenjianxz / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：为JavaScript图表提供数据

FusionCharts的JavaScript类提供了一系列的函数来提供图表数据。FusionCharts的JavaScript类支持XML或JSON格式的数据。这些数据可以是URL或字符串。在上面的代码中,图表数据来源于一个外部XML文件，该文件提供的U

JavaJspSsh / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：使用JavaScript更新图表数据

在使用FusionCharts的时候，用户可以先创建一个简单的图表,然后改变它的数据。图表最初据显示8月份的销售数据,当用户点击按钮时改为显示9月份的销售数据。每个月都有单独的XML文件,代码如下:. 然后创建了一个HTML按钮,用于调用一个JavaScr

mannoroth / 0评论 2014-11-13

FusionCharts使用教程：利用HTML表单数据渲染图表

本文中，我们将利用HTML表单数据渲染FusionCharts图表。接下来，我们将构建一个简单的餐厅销售的例子，由专人输入餐厅每天所出售的食物。我们将获得这些餐厅销售数据，并绘制图表。本文所涉及的示例代码可以在FusionCharts试用版中获取。用户在输

CoreyJia / 0评论 2014-11-10

Flash图表控件FusionCharts使用JavaScript渲染图表（不用Flash）

在使用FusionCharts的时候，如果用户希望只使用JavaScript建立图表,你那么就需要添加另一行代码，如下所示:. <title>My First chart using FusionCharts - Using pure Java

linkincsdn / 0评论 2013-08-29

fusionchart for iphone with svg

HowitWorks?</div><scripttype="text/javascript"><!

MegatronKings / 0评论 2013-01-26

fusioncharts 数据报表 （1）

一.最近要做fusioncharts方面的东西，以前没接触过，所以就粗略的了解了一下。把我觉得不错的写下来。做完项目会继续完善和深入。毕竟现在只是个热身。首先说说怎么直接在html里面引入报表吧。fusioncharts没多大，在FusionChartsF

ifconfig / 0评论 2012-11-27

FusionCharts嵌入页面的两种方式

正如上面你所见到的,我们使用<OBJECT>和<EMBED>标记在HTML页面中来嵌入图表.这种嵌入方式我们称之为直接的HTML嵌入式.然而，在最近的更新中使用IE浏览器处理ActiveX对象，最终用户将首先需要单击该图表以激活它。

郭文睿 / 0评论 2011-03-03

FusionCharts中文教程：安装指南

FusionCharts Suite XT是运行在你的桌面和移动网络浏览器上的JavaScript库。安装过程非常简单，你仅需要将下载包中的JavaScript文件复制到你的项目文件夹就行了。然后你就可以简单将FusionCharts的JavaScript

sunset / 0评论 2015-11-10

jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件FusionCharts实现的2D柱状图效果。分享给大家供大家参考，具体如下：。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格

sunnylin / 0评论 2017-03-06

jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

本文实例讲述了jQuery插件FusionCharts绘制的3D饼状图效果。分享给大家供大家参考，具体如下：。"caption": "统计2015年每个季度的收入比例",

技术发烧友 / 0评论 2017-03-03

快速解决FusionCharts联动的中文乱码问题

使用fusioncharts 时,也许你想在如demo.html 这个页面点击Chart的一个部分,然后显示这个部分的详细内容。fusioncharts有setDataXML,setDataURL 这两个方法是用来设置数据的.但是会有乱码问题,具体使用过的

CaiCai0 / 0评论 2013-12-04