最近做的项目中需要用饼状图显示——'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示，那还是两年前的事了)，在网上查了下FusionChart实现饼状图显示方面的资料，却发现资料都比较零散、不完整，或者说没有简洁明了的说清楚其用法，到FusionChart官网上去看，无奈是英文的，而且Deom项目太大，没有耐心去看，最后还是将以前的项目找出来，摸索着弄了下搞定，现将FusionChart实现柱状图、饼状图的动态数据显示的方法和经验写出来，希望对做web开发需要的朋友能有所帮助，也算是做个总结——便于以后需用时，能方便查看！

　　

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4     <title></title>

 5 </head>

 6 <body>

 7 <div id="divBarChart">

 8 </div>

 9 <div id="divPieChart">

10 </div>

11 <div id="divPieChart2">

12 </div>

13     <script type="text/javascript" src="FusionChart/FusionCharts.js"></script>

14     <script type="text/javascript">

15         function ConstructHttpString(myURL) {

16             myURL += "?rnd=" + new Date().getTime();

17             return encodeURIComponent(myURL.toString());

18         }

19         //画图(以指定 xml格式文件为数据源)

20         function DrawChart(divId,flashFileName,width,height,xmlUrl) {

21             var myChartId = new Date().getTime();

22             var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);

23             //myChart.setDataURL("data.xml"); //获取xml格式数据源

24             myChart.setDataURL(ConstructHttpString(xmlUrl)); //获取xml格式数据源

25             myChart.set

26             myChart.addParam("wmode", "Opaque");

27             myChart.render(divId);

28         }

29

30         //画图 (以指定 xml格式字符串为数据源)

31         function DrawChart2(divId, flashFileName, width, height) {

32             var myChartId = new Date().getTime();

33             var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);

34             myChart.setDataXML('<chart caption="逗你玩" numberPrefix="$"><set value="25" label="Item A" color="AFD8F8" /><set value="17" label="Item B" color="F6BD0F" /><set value="23" label="Item C" color="8BBA00" isSliced="1" /></chart>');

35             myChart.addParam("wmode", "Opaque");

36             myChart.render(divId);

37         }

38         //柱状图

39         DrawChart("divBarChart", "StackedColumn2D.swf", "831", "396", "dataXml.xml");

40         //饼状图

41         DrawChart("divPieChart", "Pie2D.swf", "831", "396", "xml.aspx");

42         //饼状图

43         DrawChart2("divPieChart2", "Pie2D.swf", "500", "396");

44     </script>

45 </body>

46 </html>

　　上面是，前端页面上的使用，可以看出：其用法很简单，对于绘制柱状图或是饼状图等，对于使用唯一的区别就是：指定不同的展示flash文件和相应的xml格式内容(具体每种chart图表对应的xml文件格式，请查看官网Demo)。其方法主要方法有：

　　setDataURL：设置数据源Url，以指定 xml格式文件为数据源

　　setDataXML：设置数据源xml内容，以指定 xml格式字符串为数据源

　　(网上说有个setJSONData的方法，可以设置json对象作为数据源，但应该是老版本或整合修改后的js文件，没找到，所以直接设置json对象作为数据源貌似不行！)

 1 using System;

 2

 3 namespace Web_Client.pieChart

 4 {

 5     public partial class xml : System.Web.UI.Page

 6     {

 7         protected void Page_Load(object sender, EventArgs e)

 8         {

 9             Response.ContentType = "text/xml; characterset=utf-8";

10             Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF });

11             Response.Write("<chart caption=\"饼状图\" numberPrefix=\"$\"><set value=\"25\" label=\"项目 A\" color=\"AFD8F8\" /><set value=\"17\" label=\"Item B\" color=\"F6BD0F\" /><set value=\"23\" label=\"Item C\" color=\"8BBA00\" isSliced=\"1\" />   <set value=\"65\" label=\"Item D\" color=\"A66EDD\" /><set value=\"22\" label=\"Item E\" color=\"F984A1\" /></chart>");

12             Response.End();

13         }

14     }

15 }

　　以上是在后台代码中输出xml格式文件为数据源，需要注意的是：Response.ContentType = "text/xml; characterset=utf-8";Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF });——这两行代码是不可缺少的，其作用是：指定输出xml文件的编码和解决中文乱码问题！

　　效果图如下：

　　

　　好了，到此为止，FusionChart的用法已介绍完毕，其本身比较简单，文章中不想做过多的叙述，如果有不清楚的朋友，可以给我留言！

　　ChartDemo.rar

FusionChart实现柱状图、饼状图的动态数据显示 附Demo的更多相关文章

  1. FusionChart实现柱状图、饼状图的动态数据显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【Python】模块学习之matplotlib柱状图、饼状图、动态图及解决中文显示问题

    前言 众所周知,通过数据绘图,我们可以将枯燥的数字转换成容易被人们接受的图表,从而让人留下更加深刻的印象.而大多数编程语言都有自己的绘图工具,matplotlib就是基于Python的绘图工具包,使用 ...

  3. JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图

    JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...

  4. PSP 进度条 柱状图 饼状图

    9号 类别 开始时间 结束时间 间隔 净时间 燃尽图 8::00 8:20 0 20分钟 站立会议 8:20 8:50 0 30分钟 读构建之法 9:20 13:20 120分钟 120分钟 四人小组 ...

  5. [BOT]自己动手实现android 饼状图，PieGraphView，附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  6. PHP实现动态生成饼状图、柱状图和折线图(转载)

    PHP在图像操作方面的表现非常出色,我们只需借助可以免费得到的GD库便可以轻松实现图.表勾画.下面将分别介绍PHP实现的饼状图.折线图和柱状图以 及他们的使用方法,这几段代码的特点就是不需要再把它们复 ...

  7. echarts 柱状图和饼状图动态获取后台数据

    运用echarts来实现图表 1.首先下载echarts包  http://echarts.baidu.com/echarts2/doc/example.html,在这里我下载的是 2.将echart ...

  8. arcgis api for flex之专题图制作（饼状图，柱状图等）

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

  9. 使用FusionCharts出柱状图和饼状图

    在最近的项目中,需要使用出图,能够查看柱状图,饼状图等效果,刚开始我们用JS写的效果,发现效果不理想,找了一个JS插件发现效果还是不理想,客户也不满意,客户希望要很炫的效果,最后我们使用了Fusion ...

随机推荐

  1. JQuery简介及HelloWorld

    一.JQuery是什么: -JQuery是一个JavaScript框架. 二.JQuery的优点: –轻量级 –强大的选择器 –出色的 DOM 操作的封装 –可靠的事件处理机制 –完善的 Ajax – ...

  2. 超赞的OOM检测（除了mat以外）

    今天看了下微博,扔物线分享了个内存检测的工具: 内存泄露是 OOM 最常见的原因,但它的侦测需人工排查,往往眼看瞎也未必能找到泄露的内存.Square 新库 LeakCanary 用一种巧妙的思路实现 ...

  3. 菜鸟认识揭开DLL木马

    相信经常玩木马的朋友们都会知道一些木马的特性,也会有自己最喜爱的木马,不过,很多朋友依然不知道近年兴起的“DLL木马”为何物.什么是“DLL木马”呢?它与一般的木马有什么不同? 一.从DLL技术说起 ...

  4. cPanel下载及安装信息 /usr/local/cpanel/bin/adduser-->realadduser

    cPanel下载及安装信息 2011年03月31日 发布在 编程开发 留下评论   说到cPanel,懂的人都知道玩意得研究研究. ISO安装 http://layer2.cpanel.net/Cen ...

  5. vhost.sh 源代码，认真看哦

    #!/bin/bash # # Web Server Install Script # Created by wdlinux QQ:12571192 # Url:http://www.wdlinux. ...

  6. android网络编程之HttpUrlConnection的讲解--DownLoadManager基本用法

    1.DownLoadManager是Android用系统服务(Service)的方式来优化处理长时间的下载操作的一个工具类.避免了我们去处理多线程,通知栏等等. 2.不要忘记添加权限 <uses ...

  7. ocs添加仓库受限问题

    添加仓库时受限出现以下问题 如图: 解决方法 修改app\ome\lib\branch\func.php文件的allow_use_num方法 /** * 允许使用的仓库数 * @access publ ...

  8. why is agreement hard in a distributed system?

    same question as: why is PAXOS necessary? 1, what if >1 nodes become leaders simultaneously? that ...

  9. postgres-xl 集体搭建

    pgxl 集群搭建 一 预备 1 下载安装解压源码 /opt/ curl -O http://files.postgres-xl.org/postgres-xl95r1beta1.tar.gz tar ...

  10. kill -0

    http://unix.stackexchange.com/questions/169898/what-does-kill-0-do 检查有没有权限杀他