fusioncharts动态改变图形的类型-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

fusioncharts动态改变图形的类型

阅读量：6894 次

发布时间：2019-06-27

本文共 2965 字，大约阅读时间需要 9 分钟。

在项目中，我们有时会需要在页面上方便地改变图形的类型，当然，如果页面不刷新就能看到改变的结果，那是最理想的。举个例子来说，在一个页面上，显示了一个月销售额的柱状图，但用户要求还可以查看月销售额的饼图，区域图。要实现这个需求，一般的做法是，再做两个页面，一个显示饼图，一个显示区域图，用户想看这两个图，点击连接就可以了。这样的做法并没有什么不妥。你还可以采用AJAX技术，来实现页面无刷新，这样用户的体验会更好一些。只是程序员累一点而已。

难道我们一定要这么累吗？不！其实我们可以有更好的办法，前提是你采用了FCF作为你的报表解决方案。

那么，在FCF里，是怎么实现上面的需求的呢？简单点说，思路是这样的：

1、使用JavaScript加载第一个图形（如柱状图），至于是用dataXML方法，还是dataURL方法，都可以。

2、当需要改变图形类型（如改成饼图）时，我们再创建一个新的FusionCharts类实例（它的SWF文件是饼图），把它render到原来的DIV。

就是这么简单。

我们来看看代码吧。

<HTML>

<HEAD>

<SCRIPT LANGUAGE="Javascript" SRC="http://www.cnblogs.com/FusionCharts/FusionCharts.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

//数据

var strXML = "<graph caption='Hours worked' showNames='1'> <set name='Tom' value='32' color='AFD8F8'/>

<set name='Mary' value='16' color='F6BD0F'/><set name='Jane' value='42' color='8BBA00'/></graph>";

/**//*

* 当用户单击按钮时调用这个方法。

* 这个方法用来使用新的SWF文件创建一个新的FusionCharts实例。

*/

function updateChart(chartSWF){

//Create another instance of the chart.

var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0");

chart1.setDataXML(strXML);

chart1.render("chart1div");

}

</SCRIPT>

</HEAD>

<BODY>

<div id="chart1div">

FusionCharts

</div>

<script language="JavaScript">

var chart1 = new FusionCharts("http://www.cnblogs.com/FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "0");

chart1.setDataXML(strXML);

chart1.render("chart1div");

</script>

<form name='frmUpdate'>

Show as:

<input type='button' value='Column' onClick="javaScript:updateChart('http://www.cnblogs.com/FusionCharts/FCF_Column3D.swf');" name='btnColumn' />

<input type='button' value='Line' onClick="javaScript:updateChart('http://www.cnblogs.com/FusionCharts/FCF_Line.swf');" name='btnLine' />

<input type='button' value='Pie' onClick="javaScript:updateChart('http://www.cnblogs.com/FusionCharts/FCF_Pie3D.swf');" name='btnPie' />

</form>

</CENTER>

</BODY>

</HTML>

复制代码

上面的代码非常浅显，就不做解释了。

动态改变图形的数据

我们已经会动态改变图形的类型了，动态改变数据和上面的原来一样，我们只需要在新建实例的时候，传入新的数据就可以了。

那么为什么还要单独来讲解这个呢？因为FCF给我们提供了一个更简单的方法，那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid，第二个参数是XML数据字符。

来看看下面的代码。

<HTML>

<HEAD>

<TITLE>FusionCharts Free & JavaScript - Updating chart using setDataXML() Method</TITLE>

<SCRIPT LANGUAGE="Javascript" SRC="http://www.cnblogs.com/FusionCharts/FusionCharts.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

function updateChart(DOMId){

updateChartXML(domId,"<graph><set name='A' value='32' /></graph>");

}

</SCRIPT>

</HEAD>

<BODY>

<div id="chart1div">

FusionCharts

</div>

<script language="JavaScript">

var chart1 = new FusionCharts("http://www.cnblogs.com/FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300");

chart1.setDataXML("<graph><set name='A' value='10' color='D64646' /><set name='B' value='11' color='AFD8F8' /></graph>");

chart1.render("chart1div");

</script>

<form name='frmUpdate'>

<input type='button' value='改变数据' onClick="javaScript:updateChart('chart1Id');" name='btnUpdate'>

</form>

</HTML>

复制代码

当我们单击”改变数据“按钮后，会调用updateChart()方法，它会使用新的数据来重新构建图形。

你可能感兴趣的文章

TStringList.SaveToStream TStringStream.SaveToStream

任务问题Oracle 技术支持之现场优化的思维路径

C6455 CSL详解

高血压的症状有哪些？

使用ASIFormDataRequset类获取webservice 接口数据

小巧数据库 Derby 使用攻略

【转】C#取硬盘、CPU、主板、网卡的序号 ManagementObjectSearcher

restful风格，restcontroller与controller

linux下绘图工具dia

登陆模块，这个是很重要的模块，有shiro和spring security专门的权限认证框架

基于 Android NDK 的学习之旅-----HelloWorld

多分类问题multicalss classification

java获得某个月的天数

JDK提供的四种线程池代码详解

ASP.NET Core的路由[3]：Router的创建者——RouteBuilder

RPM ，DPKG ，YUM ,APT-GET

4 django系列之HTML通过form标签来同时提交表单内容与上传文件

流（网络流）

DOS命令之at命令详解

vs2017莫名自动退出调试状态可以尝试一下如下的方法

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2025-02-02 17:47:51 当前IP: 3.133.153.110 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我