编程 Javascript

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源码下载】

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在Javascript中为String对象添加trim,ltrim,rtrim方法

Sep 22 Javascript

WEB高性能开发之疯狂的HTML压缩

Jun 19 Javascript

javascript利用apply和arguments复用方法

Nov 25 Javascript

jquery绑定事件不生效的解决方法

Feb 11 Javascript

Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法

Sep 01 Javascript

微信 java 实现js-sdk 图片上传下载完整流程

Oct 21 Javascript

jQuery使用EasyUi实现三级联动下拉框效果

Mar 08 Javascript

JavaScript实现三级联动效果

Jul 15 Javascript

页面点击小红心js实现代码

May 26 Javascript

解决vue-cli3 使用子目录部署问题

Jul 19 Javascript

js根据需要计算数组中重复出现某个元素的个数

Jan 18 Javascript

react的hooks的用法详解

Oct 12 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