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 不能释放内存.
Sep 07 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 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实现XML与数据格式进行转换类实例
2015/07/29 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
javascript document.referrer 用法
2009/04/30 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
tensorflow实现简单的卷积神经网络
2018/05/24 Python
django的settings中设置中文支持的实现
2019/04/28 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
大学系主任推荐信范文
2013/12/24 职场文书
《长相思》听课反思
2014/04/10 职场文书
财务人员担保书
2014/05/13 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
辞职信标准格式
2015/02/27 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Pygame Time时间控制的具体使用详解
2021/11/17 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers