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


Posted in Javascript onMarch 15, 2017

本文实例讲述了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: '(3water.com)统计年收入'
       },
       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插件HighCharts实现的2D面积图效果示例【附demo源码下载】

Javascript 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 #Javascript
字太多用...代替的方法(两种)
Mar 15 #Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 #Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 #Javascript
js仿淘宝商品放大预览功能
Mar 15 #Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 #Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 #Javascript
You might like
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
php跨服务器访问方法小结
2015/05/12 PHP
Dojo 学习要点
2010/09/03 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
webpack优化的深入理解
2018/12/10 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python中的super()方法使用简介
2015/08/14 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python批量下载抖音视频
2019/06/17 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Pytorch之finetune使用详解
2020/01/18 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python读写压缩文件的方法
2020/07/30 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
MySQL日期时间函数知识汇总
2022/03/17 MySQL