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

更新时间：2017年03月15日 10:53:24 作者：翱翔天地

这篇文章主要介绍了jQuery插件HighCharts实现的2D面积图效果,结合完整实例形式分析了jQuery插件HighCharts绘制2D面积图的相关步骤与属性设置技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

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

1、实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D面积图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
   $(function(){
     $('#areaChart').highcharts({
       chart: {
         type: 'area'
       },
       title: {
         text: '(jb51.net)统计年收入'
       },
       subtitle: {
         text: ''
       },
       xAxis: {
         labels: {
           formatter: function() {
             return this.value;
           }
         }
       },
       yAxis: {
         title: {
           text: '月收入'
         },
         labels: {
           formatter: function() {
             return this.value / 2000 +'k';
           }
         }
       },
       tooltip: {
         pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>{point.x}'
       },
       plotOptions: {
         area: {
           pointStart: 1840,
           marker: {
             enabled: true,
             symbol: 'circle',
             radius: 1,
             states: {
               hover: {
                 enabled: true
               }
             }
           }
         }
       },
       series: [{
         name: '张三',
         data: [784, 645, 5623, 8945, 42121, 6895 , 1451, 3212, 1100, 2359, 369, 640,
           1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
           27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
           26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
           24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
           22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
           10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
       }, {
         name: '李四',
         data: [9865, 7845, 1245, 9565, 4512, 5644, 1245 , 6532 , 7845 ,4512,
         4512, 2589, 5000, 1920, 1520, 2600, 4026, 660, 869, 1060, 1605, 2471, 3322,
         4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
         15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
         33952, 35804, 37431, 39197, 4400, 43000, 41000, 39000, 37000,
         35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
         21000, 20000, 19000, 18000, 18000, 17000, 16000]
       }]
     });
   });
</script>
</head>
<body>
  <div id="areaChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图如下：

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

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

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

您可能感兴趣的文章:

jQuery.validate 常用方法及需要注意的问题
jQuery.validate 常用方法及需要注意的问题，需要的朋友可以参考一下
2013-03-03
jquery实现超简单的瀑布流布局【推荐】
本文主要介绍了jquery实现超简单的瀑布流布局的实例，代码简单，容易修改。下面跟着小编一起来看下吧
2017-03-03
JqGrid web打印实现代码
最近，项目使用了JqGrid，但需要打印Grid里面的数据。使用的是CSS属性中的Media媒体类型来控制打印样式。
2011-05-05
jQuery后代选择器用法实例
这篇文章主要介绍了jQuery后代选择器用法,以设置文本颜色的实例分析了后代选择器的应用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
Jquery UI震动效果实现原理及步骤
如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告等等，今天这篇文章将介绍怎样使你的页面中的元素震动起来,感兴趣的你可不要错过了哦，或许对你学习jquery ui 有所帮助
2013-02-02
jQuery Ajax 全解析
本文地址: jQuery Ajax 全解析本文作者：QLeelulu
2009-02-02
jValidate 基于jQuery的表单验证插件
网上基于jQuery的表单验证插件已有很多，但是这个轮子我还是继续做一个，因为这个表单验证插件是从我以前的个人JS框架移值过来的（我已慢慢投入jQuery的怀抱），并且它的验证规则书写方式也许会让你眼前一亮。
2009-12-12
简单的代码实现jquery定时器
当收到消息的时候能够及时的刷新,显示收到消息的条数，下面与大分享下使用简单的代码实现jquery定时器
2013-11-11
jquery Easyui快速开发总结
easyui是一种基于jQuery的用户界面插件集合，easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能，本篇文章给大家整理有关jquery Easyui快速开发的技巧，需要的朋友可以参考下
2015-08-08
jQuery动画_动力节点节点Java学院整理
用JavaScript手动实现动画效果，需要编写非常复杂的代码。下面给分享jQuery内置的几种动画样式，需要的朋友参考下吧
2017-07-07