1、静态页面

Doughnut.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>FusionCharts Doughnut2D</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="../scripts/Charts/FusionCharts.js"></script>
    <script type="text/javascript">
        $(function(){
              var doughnut2D = new FusionCharts( "../scripts/Charts/Doughnut2D.swf", "doughnut2DId", "100%", "540", "0" );
      		  doughnut2D.setXMLUrl("data/doughnut2D.xml");
              doughnut2D.render("doughnut2DChart");
        });
    </script>

  </head>

  <body>
    <div id="doughnut2DChart"></div>
  </body>
</html>

2、XML数据源

doughnut2D.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='一周收入' showPercentageValues='1' baseFont='微软雅黑' baseFontSize='16'
       baseFontColor='#00FF00' showLegend='1' legendPosition='BOTTOM' legendIconScale='0'
       legendBorderColor='#0000FF' legendShadow='1' legendAllowDrag='1'>
   <set label='星期一' value='895645' />
   <set label='星期二' value='154511' />
   <set label='星期三' value='562111' />
   <set label='星期四' value='451211' />
   <set label='星期五' value='356124' />
   <set label='星期六' value='754544' />
   <set label='星期日' value='454212' />
</chart>

3、运行结果

FusionCharts 2D环饼图的更多相关文章

  1. FusionCharts 3D环饼图

    1.设计静态页面 Doughnut.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...

  2. FusionCharts多数据验证饼图label是否重叠

    昨天,有人问我一个问题:由于饼图的数据太多,label标签上的汉字过多,导致重叠,该怎么解决? 今天我用大量的数据,label标签的字符也很多,但是通过验证没有发现有重叠的情况啊! 1.验证的JSP页 ...

  3. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

  4. HighCharts之2D对数饼图

    HighCharts之2D对数饼图 1.实例源码 LogarithmicPie.html: <!DOCTYPE html> <html> <head> <me ...

  5. Flex中的FusionCharts 2D面积图

    Flex中的FusionCharts 2D面积图 1.源码 <?xml version="1.0" encoding="utf-8"?> <s ...

  6. Flex中的FusionCharts 2D折线图

    Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...

  7. Flex中的FusionCharts 2D饼图

    1.设计思路 (1)FusionCharts中有Flex组件文件FusionCharts.swc,这样可以让FusionCharts用Flex展示出来: (2)利用xmlns:components=& ...

  8. FusionCharts 2D柱状图和折线图的组合图

    1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...

  9. Flex中的FusionCharts 2D柱形图

    1.2D柱形图源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...

随机推荐

  1. NOI2001 食物链

    食物链 题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B 吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种 ...

  2. VS下WPF自定义控件的基本步骤和基本代码实现

    一.自定义控件的基本步骤: (本示例项目名称为:W:添加的自定义控件名称为) 1.  在"解决方案资源管理器"窗口的项目名上: 右击à添加à新建项(Ctrl+Shift+A) 2. ...

  3. jQuery应用操作之---网页选项卡(tabs)

    示例: <div class="tab"> <div class="tab_menu"> <ul> <li class ...

  4. python可用ORM之Pony

    Pony是Python的一种ORM,它允许使用生成器表达式来构造查询,通过将生成器表达式的抽象语法树解析成SQL语句.它也有在线ER图编辑器可以帮助你创建Model. 示例分析 Pony语句: sel ...

  5. Spring源码情操陶冶-DefaultBeanDefinitionDocumentReader#parseBeanDefinitions

    前言-阅读源码有利于陶冶情操,本文承接前文Spring源码情操陶冶-AbstractApplicationContext#obtainFreshBeanFactory 前文提到最关键的地方是解析bea ...

  6. hdu 5730 Shell Necklace [分治fft | 多项式求逆]

    hdu 5730 Shell Necklace 题意:求递推式\(f_n = \sum_{i=1}^n a_i f_{n-i}\),模313 多么优秀的模板题 可以用分治fft,也可以多项式求逆 分治 ...

  7. BZOJ 1115: [POI2009]石子游戏Kam [阶梯NIM]

    传送门 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证操作后仍然满足初始时的条件谁没有石子可移时输掉游戏.问先手是否必胜 ...

  8. selenium headlesschrome下设置最大窗口模式

    做微博登录的时候,用selenium的chrome界面模式,可以用下面方式显示最大窗口: from selenium.webdriver.chrome.options import Options c ...

  9. Hive metastore表结构设计分析

    今天总结下,Hive metastore的结构设计.什么是metadata呢,对于它的描述,可以理解为数据的数据,主要是描述数据的属性的信息.它是用来支持如存储位置.历史数据.资源查找.文件记录等功能 ...

  10. LNMP搭建01 -- 编译安装MySQL 5.6.14 和 LNMP相关的区别

    [编译安装MySQL 5.6.14] [http://www.cnblogs.com/xiongpq/p/3384681.html ]  [mysql-5.6.14.tar.gz 下载] http:/ ...