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. gulp压缩文件最简示例

    安装gulp-uglify 作为项目的开发依赖即可 $ npm gulp-uglify --save-dev 压缩js文件 gulpfile.js const gulp = require('gulp ...

  2. 【linux之简介】

    一.操作系统是什么 1.定义 操作系统,英文名称Operating System,简称OS,是计算机系统中必不可少的基础系统软件,它是应用程序运行以及用户操作必备的基础环境支撑,是计算机系统的核心. ...

  3. Spring基础篇——bean的自动化装配

    上篇博文讲Spring的IOC容器时说道,虽然容器功能强大,但容器本身只是个空壳,需要我们主动放入装配对象,并告诉它对象之间的协作关系,然后容器才能按照我们的指示发挥它的魔力,完成装配bean的使命. ...

  4. BZOJ 2724: [Violet 6]蒲公英 [分块 区间众数]

    传送门 题面太美不忍不放 分块分块 这种题的一个特点是只有查询,通常需要预处理:加入修改的话需要暴力重构预处理 预处理$f[i][j]$为第i块到第j块的众数,显然$f[i][j]=max{f[i][ ...

  5. Windows Server 2016-查询FSMO角色信息的三种方法

    FSMO操作主机角色有五种:林范围操作主机角色有两种,分别是 架构主机角色(Schema Master)和 域命名主机角色(Domain Naming Master):及域范围操作主机角色三种,分别是 ...

  6. Python数据结构之二——tuple（元组）

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 列表和元组是Python中最常见的内建序列.元组与列表一样,但是tuple一旦创建就不能修改.创建元组的语法非常简单 ...

  7. 关于@Override

    首先,来了解一下“重载”和“覆写”的区别: 重载: (1)方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载Overloading是一个类中多态 ...

  8. LeetCode - 492. Construct the Rectangle

    For a web developer, it is very important to know how to design a web page's size. So, given a speci ...

  9. CentOS 7 安装Maven

    Maven的下载地址是:http://maven.apache.org/download.cgi 安装Maven非常简单,只需要将下载的压缩文件解压就可以了. cd /data wget http:/ ...

  10. Java线程池ThreadPoolExector的源码分析

    前言:线程是我们在学习java过程中非常重要的也是绕不开的一个知识点,它的重要程度可以说是java的核心之一,线程具有不可轻视的作用,对于我们提高程序的运行效率.压榨CPU处理能力.多条线路同时运行等 ...