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 相关文章推荐
JQuery select控件的相关操作实现代码
Sep 14 Javascript
js opener的使用详解
Jan 11 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
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初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
layui表格实现代码
2017/05/20 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
python3 配置logging日志类的操作
2020/04/08 Python
python属于跨平台语言码
2020/06/09 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
行政助理求职自荐信
2013/10/26 职场文书
消防安全标语
2014/06/07 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
鼋头渚导游词
2015/02/05 职场文书
导游词之包公祠
2019/11/25 职场文书