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 相关文章推荐
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
简单的js表格操作
Sep 24 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
js常用正则表达式集锦
May 17 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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读取javascript设置的cookies的代码
2010/04/12 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
Python sys模块常用方法解析
2020/02/20 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
Sony C++笔试题
2013/03/10 面试题
监理资料员岗位职责
2014/01/03 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
大明湖导游词
2015/02/03 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
区域销售大会开幕词
2016/03/04 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书