jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

技术发烧友 2017-03-03

本文实例讲述了jQuery插件FusionCharts绘制的3D饼状图效果。分享给大家供大家参考，具体如下：

1、实现源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>最新版FusionCharts3D饼图</title>
    <script src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/fusioncharts.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 98%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
    </style>
    <script>
      $(document).ready(function(){
        FusionCharts.ready(function () {
          var ageGroupChart = new FusionCharts({
            type: 'pie3d',
            renderAt: 'pie3D',
            width: '1350',
            height: '650',
            dataFormat: 'json',
            dataSource: {
              "chart": {
                "caption": "统计2015年每个季度的收入比例",
                "subCaption": "",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "0",
                "showPercentValues": "1",
                "showPercentInTooltip": "0",
                "decimals": "2",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "showHoverEffect":"1",
                "showLegend": "1",
                "legendBgColor": "#ffffff",
                "legendBorderAlpha": '0',
                "legendShadow": '0',
                "legendItemFontSize": '10',
                "legendItemFontColor": '#666666'
              },
              "data": [
                {
                  "label": "第一季度",
                  "value": "255040"
                },
                {
                  "label": "第二季度",
                  "value": "689545"
                },
                {
                  "label": "第三季度",
                  "value": "784595"
                },
                {
                  "label": "第四季度",
                  "value": "325848"
                }
              ]
            }
          }).render();
        });
      });
    </script>
  </head>
  <body>
    <div id="pie3D"></div>
  </body>
</html>

2、实现效果图：

jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

附：完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

技术发烧友

技术发烧友

相关推荐

最值得信赖的JavaScript图表工具！别说你还不知道FusionCharts

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.

xiaoge00 / 0评论 2019-10-30

JS图表控件FusionCharts使用教程：如何使用JavaScript渲染iPhone/iPod/iPad图表

FusionCharts XT允许用户创建建立JavaScript图表。这个特性允许用户在不支持Flash播放器的web浏览器上创建图表,如iPhone / iPad。FusionCharts内部利用Highcharts库生成JavaScript图表。这个

huanglianhuabj00 / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：使用JavaScript渲染图表（不用Flash）

在使用FusionCharts的时候，如果用户希望只使用JavaScript建立图表,你那么就需要添加另一行代码，如下所示:. 这段代码会使FusionCharts渲染器跳过Flash渲染，并创建纯基于JavaScript的图表。<title>

gufeijunchi / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：为JavaScript图表提供数据

FusionCharts的JavaScript类提供了一系列的函数来提供图表数据。FusionCharts的JavaScript类支持XML或JSON格式的数据。这些数据可以是URL或字符串。在上面的代码中,图表数据来源于一个外部XML文件，该文件提供的U

Blovesea / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：使用JavaScript更新图表数据

在使用FusionCharts的时候，用户可以先创建一个简单的图表,然后改变它的数据。图表最初据显示8月份的销售数据,当用户点击按钮时改为显示9月份的销售数据。每个月都有单独的XML文件,代码如下:. 然后创建了一个HTML按钮,用于调用一个JavaScr

JavaJspSsh / 0评论 2014-11-13

FusionCharts使用教程：利用HTML表单数据渲染图表

本文中，我们将利用HTML表单数据渲染FusionCharts图表。接下来，我们将构建一个简单的餐厅销售的例子，由专人输入餐厅每天所出售的食物。我们将获得这些餐厅销售数据，并绘制图表。本文所涉及的示例代码可以在FusionCharts试用版中获取。用户在输

STPace / 0评论 2014-11-10

FusionCharts中文教程：自定义图表——数据标签

数据标签指显示在图表的X轴的数据点的名称。FusionCharts提供5种不同的显示模式。用于设置数据标签显示模式的属性如下表所示：。5种可供选择的选项：auto、wrap、stagger、rotate或none。在该模式下图表自动选择合适的数据标签显示模

shanhuijava / 0评论 2015-12-25

FusionCharts HelloWorld(2)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>. <!DOCTYPE HTML PUBL

二毛妮子 / 0评论 2015-01-20

FusionCharts使用教程：在PHP程序中创建JavaScript图表

绝大多数图表控件都可用于PHP应用程序，其中大部门是服务器端组件，无需任何交互即可生成图表和仪表的静态图像，而一些客户端图表组件则需要借助于JavaScript来生成交互式图表、仪表和网格。FusionCharts为PHP开发者提供了服务器端库，开发人员无

xiaocaibai / 0评论 2014-11-15

JS图表控件FusionCharts使用教程：如何使用JavaScript渲染iPhone/iPod/iPad图表

不需要任何额外的代码来实现。FusionCharts的JavaScript类自动检 测不支持Flash的设备，并创建JavaScript图表。FusionCharts是如何工作的：FusionCharts XT提供一个全新的FusionCharts Jav

NONINETEEN / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：使用JavaScript渲染图表（不用Flash）

在使用FusionCharts的时候，如果用户希望只使用JavaScript建立图表,你那么就需要添加另一行代码，如下所示:. <title>My First chart using FusionCharts - Using pure Java

shenjianxz / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：为JavaScript图表提供数据

FusionCharts的JavaScript类提供了一系列的函数来提供图表数据。FusionCharts的JavaScript类支持XML或JSON格式的数据。这些数据可以是URL或字符串。在上面的代码中,图表数据来源于一个外部XML文件，该文件提供的U

JavaJspSsh / 0评论 2014-11-13

JS图表控件FusionCharts使用教程：使用JavaScript更新图表数据

在使用FusionCharts的时候，用户可以先创建一个简单的图表,然后改变它的数据。图表最初据显示8月份的销售数据,当用户点击按钮时改为显示9月份的销售数据。每个月都有单独的XML文件,代码如下:. 然后创建了一个HTML按钮,用于调用一个JavaScr

mannoroth / 0评论 2014-11-13

FusionCharts使用教程：利用HTML表单数据渲染图表

本文中，我们将利用HTML表单数据渲染FusionCharts图表。接下来，我们将构建一个简单的餐厅销售的例子，由专人输入餐厅每天所出售的食物。我们将获得这些餐厅销售数据，并绘制图表。本文所涉及的示例代码可以在FusionCharts试用版中获取。用户在输

CoreyJia / 0评论 2014-11-10

使用FusionCharts创建可更新数据的JavaScript图表

先创建一个简单的图表,然后改变它的数据。图表最初据显示8月份的销售数据,当用户点击按钮时改为显示9月份的销售数据。每个月都有单独的XML文件,代码如下:. </html>在上面的代码中,我们使用8月的数据创建了一个图表,数据存在于AugustD

maple00 / 0评论 2013-09-06

Flash图表控件FusionCharts使用JavaScript渲染图表（不用Flash）

在使用FusionCharts的时候，如果用户希望只使用JavaScript建立图表,你那么就需要添加另一行代码，如下所示:. <title>My First chart using FusionCharts - Using pure Java

linkincsdn / 0评论 2013-08-29

fusionchart for iphone with svg

HowitWorks?</div><scripttype="text/javascript"><!

MegatronKings / 0评论 2013-01-26

fusioncharts 数据报表 （1）

一.最近要做fusioncharts方面的东西，以前没接触过，所以就粗略的了解了一下。把我觉得不错的写下来。做完项目会继续完善和深入。毕竟现在只是个热身。首先说说怎么直接在html里面引入报表吧。fusioncharts没多大，在FusionChartsF

ifconfig / 0评论 2012-11-27

FusionCharts嵌入页面的两种方式

正如上面你所见到的,我们使用<OBJECT>和<EMBED>标记在HTML页面中来嵌入图表.这种嵌入方式我们称之为直接的HTML嵌入式.然而，在最近的更新中使用IE浏览器处理ActiveX对象，最终用户将首先需要单击该图表以激活它。

郭文睿 / 0评论 2011-03-03

FusionCharts中文教程：安装指南

FusionCharts Suite XT是运行在你的桌面和移动网络浏览器上的JavaScript库。安装过程非常简单，你仅需要将下载包中的JavaScript文件复制到你的项目文件夹就行了。然后你就可以简单将FusionCharts的JavaScript

sunset / 0评论 2015-11-10

jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件FusionCharts实现的2D柱状图效果。分享给大家供大家参考，具体如下：。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格

sunnylin / 0评论 2017-03-06

快速解决FusionCharts联动的中文乱码问题

使用fusioncharts 时,也许你想在如demo.html 这个页面点击Chart的一个部分,然后显示这个部分的详细内容。fusioncharts有setDataXML,setDataURL 这两个方法是用来设置数据的.但是会有乱码问题,具体使用过的

CaiCai0 / 0评论 2013-12-04