<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="divBarChart">
</div>
<div id="divPieChart">
</div>
<div id="divPieChart2">
</div>
<script type="text/javascript" src="FusionChart/FusionCharts.js"></script>
<script type="text/javascript">
function ConstructHttpString(myURL) {
myURL += "?rnd=" + new Date().getTime();
return encodeURIComponent(myURL.toString());
}
//画图(以指定 xml格式文件为数据源)
function DrawChart(divId,flashFileName,width,height,xmlUrl) {
var myChartId = new Date().getTime();
var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);
//myChart.setDataURL("data.xml"); //获取xml格式数据源
myChart.setDataURL(ConstructHttpString(xmlUrl)); //获取xml格式数据源
myChart.set
myChart.addParam("wmode", "Opaque");
myChart.render(divId);
}

//画图 (以指定 xml格式字符串为数据源)
function DrawChart2(divId, flashFileName, width, height) {
var myChartId = new Date().getTime();
var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);
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>');
myChart.addParam("wmode", "Opaque");
myChart.render(divId);
}
//柱状图
DrawChart("divBarChart", "StackedColumn2D.swf", "831", "396", "dataXml.xml");
//饼状图
DrawChart("divPieChart", "Pie2D.swf", "831", "396", "xml.aspx");
//饼状图
DrawChart2("divPieChart2", "Pie2D.swf", "500", "396");
</script>
</body>
</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实现柱状图、饼状图的动态数据显示的更多相关文章

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

    最近做的项目中需要用饼状图显示——'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资 ...

  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. PHP实现动态生成饼状图、柱状图和折线图(转载)

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

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

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

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

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

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

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

  9. ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

随机推荐

  1. ceph: health_warn clock skew detected on mon的解决办法

    造成集群状态health_warn:clock skew detected on mon节点的原因有两个,一个是mon节点上ntp服务器未启动,另一个是ceph设置的mon的时间偏差阈值比较小. 排查 ...

  2. CAS客户端整合（二） Zabbix

    Zabbix是一个强大的服务器/交换机监控应用,有zabbix-server, zabbix-client, zabbix-web 三部分.zabbix-web管理端是用php写的. 前文参考:CAS ...

  3. P5277 【模板】多项式开根（加强版）（bsgs or Cipolla）

    题面 传送门 题解 首先你得会多项式开根->这里 其次你得会解形如 \[x^2\equiv a \pmod{p}\] 的方程 这里有两种方法,一个是\(bsgs\)(这里),还有一种是\(Cip ...

  4. [Objective-C语言教程]类别（28）

    有时,可能会发现希望通过添加仅在某些情况下有用的行为来扩展现有类. 要向现有类添加此类扩展,Objective-C提供了类别和扩展. 如果需要向现有类添加方法,或许为了添加功能以便在应用程序中更容易地 ...

  5. day 10 课后作业

    # -*- coding: utf-8 -*-# @Time : 2019/1/2 16:35# @Author : Endless-cloud# @Site : # @File : 课后作业.py# ...

  6. 如何使用Node爬虫利器Puppteer进行自动化测试

    文:华为云DevCloud 乐少 1.背景 1.1 前端自动化测试较少 前端浏览器众多导致页面兼容性问题比较多,另外界面变化比较快,一个月内可能页面改版两三次,这样导致对前端自动化测试较少,大家也不是 ...

  7. Word2Vec原理及代码

    一.Word2Vec简介 Word2Vec 是 Google 于 2013 年开源推出的一款将词表征为实数值向量的高效工具,采用的模型有CBOW(Continuous Bag-Of-Words,连续的 ...

  8. 51.RocketMQ 顺序消费

    大部分的员工早上的心情可能不会很好,因为这时想到还有很多事情要做,压力会大点,一般到下午4点左右,状态会是一天中最好的,因为这时大部分的工作做得差不多了,又快要下班了,当然也不是绝对.要注意记录各下属 ...

  9. C#-MVC-★不同层之间的传值方式★

    方式一:form表单提交(一对一传值) 例如: view层代码: action - 数据提交到的服务端(如Home控制器下的Insert动作) method - 提交数据的方式(post或get) n ...

  10. python学习，day4：生成器

    1.生成器:只有在调用是才会生成相应的数据.(比较省内存,它只保留当时生成的.而列表会保存整个列表) a = [i*2 for i in range(10)] #列表生成式 print(a) 这样会把 ...