先创建一个简单的图表,然后改变它的数据(请参见下面的代码)。图表最初据显示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()
最终图表如下所示:
相关推荐
使用XML作为其资料介面,FusionCharts充分利用流体美丽的Flash创建紧凑,互动性和视觉逮捕图表。 动画和交互图 使用FusionCharts ,您可以快速,方便地提供动画图表有很多的互动选择的最终用户。不同的图表类型支援...
它与XML和JSON数据一起工作,并可以集成您使用的任何服务器端的技术(ASP,ASP.NET,PHP,JSP,ColdFusion,Ruby Rails等)和数据库。FusionCharts XT能满足您所有的制图要求。 FusionCharts XT是值得信赖的图表...
该项目不再被积极维护FusionCharts React Native: 一个React Native组件,为FusionCharts JavaScript图表库提供绑定。 它可以轻松地将丰富的交互式图表添加到任何React Native项目中。Github回购: : 文档: : 支持...
苗条融合图用于FusionCharts JavaScript图表库的简单轻巧的官方Svelte组件。 svelte-fusioncharts使您可以轻松地在Svelte应用程序或项目中添加JavaScript图表。Github回购: : 支持: : 融合图官方网站: : 官方NPM...
Java项目!可更改保存报表的路径!使用fusioncharts 通过javascript 提交报表图片!将图片保存到服务器后可以自己写代码!导出Excel、world等!参考文献http://blog.csdn.net/wangxw8746/article/details/27674471
FusionCharts是一个JavaScript图表库,可为您的Web和移动应用程序提供100多个图表和2,000多个地图。 所有的可视化都是交互的和动画的,它们以SVG和VML(对于IE 6/7/8)呈现。 此软件包还包含FusionTime(时间序列图...
FusionCharts JavaScript图表库的一个简单而轻巧的官方Angular组件。 angular-fusioncharts使您可以轻松地在Angular应用程序中添加JavaScript图表。 Github回购: : 文档: : 支持: : 融合图 官方网站: : ...
angularjs-fusioncharts 一个用于FusionCharts JavaScript图表库的简单轻巧的官方AngularJS组件。 angularjs-fusioncharts使您可以轻松地在AngularJS应用程序中添加JavaScript图表。Github回购: : 文档: : 支持: ...
融合图用于FusionCharts JavaScript图表库的简单轻巧的VueJS组件。 Vue-FusionCharts包装器可让您轻松将FusionCharts包含在VueJS项目中。Github回购: : 文档: : 支持: : 融合图官方网站: : 官方NPM软件包: : ...
FusionCharts是一种制图组件,可以帮您为您的Web应用创建交互式的、数据驱动的图表、仪表盘和地图。它具有智能化、用户友好和创新等特点,可以将单调的数据转化为栩栩如生的图像,从而使您的Web应用更加的生动。它...
FusionCharts Free使用JavaScript加载图形 FusionCharts Free使用dataXML加载数据 FusionCharts Free图形的基本元素 FusionCharts Free和XML FusionCharts Free和组合图XML 动态改变图形的类型和数据 FCF中的...
不仅是HTML JavaScript,无论是何种服务器端编程语言,比如PHP,ASP, .NET, JSP, ColdFusion, JavaScript, Ruby on Railsy等等,甚至是在你的Windows应用程序中,都可以使用FusionCharts Free方便地加入图表展示功能...
FusionCharts JavaScript图表库的一个简单轻巧的官方React组件。 react-fusioncharts使您可以轻松地在React应用程序或项目中添加JavaScript图表。 Github回购: : 文档: : 支持: : 融合图 官方网站: : ...
它结合了FusionCharts Suite XT的愉悦性和全面性以及易于使用的jQuery语法,可帮助您向Web和移动应用程序中添加交互式JavaScript图表。Github回购: : 文档: : 支持: : 融合图官方网站: : 官方NPM软件包: : ...
FusionCharts PHP服务器端包装程序使您无需编写任何JavaScript代码即可在PHP网站中创建图表。该包装器如何工作? 按照惯例,FusionCharts Suite XT使用JavaScript和HTML在浏览器中生成图表。 PHP包装器使您可以在...
使得出口能力为PDF格式的图表和图片在客户端以及服务器端 ...出口能力的数据,图表的CSV使用上下文菜单或JavaScript的API 能力得到了XML的任何使用JavaScript API的图表 能力得到了一张图表属性使用JavaScript的API
里面有完整的api和详细的例子,45万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案。类似Excel的表格设计方式,大大减少开发代码量和开发周期。 丰富的图表可视化类型,使设计既方便,又美观。
angular-fusioncharts, 面向FusionCharts的Angular JS绑定 #AngularJS 图表插件...###Details 使用这个AngularJS图表插件,只使用一个指令向你的网络和移动应用程序添加交互式图表。 从FusionCharts的核心JavaScript
Rails包装器可使用FusionCharts构建图表。 安装(RubyGems) 将此行添加到您的应用程序的Gemfile中: gem 'fusioncharts-rails' 然后执行: $ bundle 或将其自己安装为: $ gem install fusioncharts-rails...
FusionCharts Free支持22种图表,而商用版FusionCharts v3可支持45种图表,不仅如此,而且商用版在3D动画和阴影处理上更加生动形象。同时FusionCharts Free基于MIT和GNU GPL许可协议。任何人和组织可以分发或者学习...