欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-11-20 12:15:58
本文实例讲述了jquery插件fusioncharts实现的2d面积图效果。分享给大家供大家参考，具体如下： 1、实现代码：

本文实例讲述了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": "(jb51.net)第一季度",
       "value": "59865"
      },
      {
       "label": "(jb51.net)第二季度",
       "value": "63254"
      },
      {
       "label": "(jb51.net)第三季度",
       "value": "34256"
      },
      {
       "label": "(jb51.net)第四季度",
       "value": "89562"
      }
     ]
    }
   }).render();
  });
 </script>
 </head>
 <body>
 <div id="area2d"></div>
 </body>
</html>

2、实现效果图：

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

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

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

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

上一篇： AngularJS标准Web业务流程开发框架-4.AngularJS四大模块之一：Controller

下一篇： linux下为nginx添加jvmroute模块的方法

推荐阅读