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


Posted in Javascript onMarch 06, 2017

本文实例讲述了jQuery插件FusionCharts实现的2D面积图效果。分享给大家供大家参考,具体如下:

1、实现代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>FusionCharts2D面积图</title>
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
 <script type="text/javascript" src="fusioncharts/fusioncharts.charts.js"></script>
 <script type="text/javascript">
  FusionCharts.ready(function () {
   var salesChart = new FusionCharts({
    type: 'area2d',
    renderAt: 'area2D',
    width: '1290',
    height: '600',
    dataFormat: 'json',
    dataSource: {
     "chart": {
      "caption": "(三水点靠木)年度收入",
      "subCaption": "",
      "xAxisName": "季度",
      "yAxisName": "收入",
      "numberPrefix": "¥",
      "paletteColors": "#1275c2",
      "bgColor": "#CCCCCC",
      "showBorder": "1",
      "showCanvasBorder": "1",
      "plotBorderAlpha": "10",
      "usePlotGradientColor": "10",
      "plotFillAlpha": "50",
      "showXAxisLine": "1",
      "axisLineAlpha": "25",
      "divLineAlpha": "10",
      "showValues": "1",
      "showAlternateHGridColor": "0",
      "captionFontSize": "14",
      "subcaptionFontSize": "14",
      "subcaptionFontBold": "0",
      "toolTipColor": "#ffffff",
      "toolTipBorderThickness": "1",
      "toolTipBgColor": "#FF0000",
      "toolTipBgAlpha": "60",
      "toolTipBorderRadius": "5",
      "toolTipPadding": "10",
      "baseFont":"20"
     },
     "data": [
      {
       "label": "(3water.com)第一季度",
       "value": "59865"
      },
      {
       "label": "(3water.com)第二季度",
       "value": "63254"
      },
      {
       "label": "(3water.com)第三季度",
       "value": "34256"
      },
      {
       "label": "(3water.com)第四季度",
       "value": "89562"
      }
     ]
    }
   }).render();
  });
 </script>
 </head>
 <body>
 <div id="area2D"></div>
 </body>
</html>

2、实现效果图:

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

Javascript 相关文章推荐
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
Vue 2.x教程之基础API
Mar 06 #Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 #Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 #Javascript
JavaScript函数参数的传递方式详解
Mar 06 #Javascript
jQuery实现遍历复选框的方法示例
Mar 06 #Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 #Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 #Javascript
You might like
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python中操作文件的模块的方法总结
2021/02/04 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
高级人员简历的自我评价分享
2013/11/03 职场文书
教师自荐信范文
2013/12/09 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
法定授权委托证明书
2014/09/27 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书