脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery插件HighCharts 2D面积图

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遍历筛选数组的几种方法和遍历解析json对象

    jquery遍历筛选数组的几种方法和遍历解析json对象

    本文为大家介绍下jquery遍历筛选数组的几种方法和遍历解析json对象的具体实现，感兴趣的朋友不要错过
    2013-12-12
  • 使用jQuery获取所有标签的实现代码

    使用jQuery获取所有标签的实现代码

    在前端开发中,使用jQuery能够方便地操作DOM元素,有时候我们需要获取页面上所有的HTML标签,可以通过jQuery来实现,本文将介绍如何使用jQuery获取所有的标签,并展示一个简单的示例代码,需要的朋友可以参考下
    2024-09-09
  • 浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作

    下面小编就为大家带来一篇浅谈jQuery 选择器和dom操作。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 基于LayUI分页和LayUI laypage分页的使用示例

    基于LayUI分页和LayUI laypage分页的使用示例

    本篇文章主要介绍了基于LayUI分页和LayUI laypage分页的使用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • jQuery实现轮播图及其原理详解

    jQuery实现轮播图及其原理详解

    这篇文章主要为大家详细介绍了jQuery实现轮播图及其原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 用jquery写的菜单从左往右滑动出现

    用jquery写的菜单从左往右滑动出现

    这篇文章主要介绍了用jquery写的菜单从左往右滑动出现的效果,需要的朋友可以参考下
    2014-04-04
  • jQuery实现自定义下拉列表

    jQuery实现自定义下拉列表

    这篇文章主要介绍了使用jQuery实现自定义下拉列表的方法及代码分享，效果非常不错，兼容性也很棒，这里推荐给小伙伴们。
    2015-01-01
  • JQuery中this的指向详解

    JQuery中this的指向详解

    本文详细讲解了JQuery中this的指向，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例

    jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例

    这篇文章主要介绍了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法,以完整实例形式较为详细的分析了jQuery图片特效的使用技巧,需要的朋友可以参考下
    2015-03-03
  • jQuery实现为动态添加的元素绑定事件实例分析

    jQuery实现为动态添加的元素绑定事件实例分析

    这篇文章主要介绍了jQuery实现为动态添加的元素绑定事件,结合实例形式分析了jQuery常见的事件绑定相关操作技巧与注意事项,需要的朋友可以参考下
    2018-09-09

最新评论