HighCharts之2D含有负值的面积图

1、HighCharts之2D含有负值的面积图源码

AreaNegative.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D含有负值的面积图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
     $(function(){
    	 $('#areaNegativeChart').highcharts({
    		 chart: {
                 type: 'area'
             },
             title: {
                 text: '含有负值的面积图'
             },
             xAxis: {
                 categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日']
             },
             credits: {
                 enabled: true
             },
             series: [{
                 name: '长河水位',
                 data: [24, 68, -48, 64, -34,53,-42]
             }, {
                 name: '寺河水位',
                 data: [-32, 45, -23, 42, -61,54,23]
             }, {
                 name: '石河水位',
                 data: [56, -64, 44, -28, 35,-24,64]
             }]
         });
     });
</script>
</head>
<body>
   <div id="areaNegativeChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

HighCharts之2D含有负值的面积图的更多相关文章

  1. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

  2. HighCharts之2D数值带有百分数的面积图

    HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...

  3. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  4. HighCharts之2D面积图

    HighCharts之2D面积图  1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...

  5. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

  6. HighCharts之2D条状图

    HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...

  7. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  8. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  9. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. 使用hexo搭建个人博客

    安装前提 node.js git 如果缺少以上条件,则前往相应的官网下载安装即可.. 安装hexo $ npm install hexo-cli -g 待安装完成后,执行相关命令查看hexo的信息. ...

  2. 浅谈python的对象的三大特性之封装

    我们家里都有电视机,从开机,浏览节目,换台到关机,我们不需要知道电视机里面的具体细节,只需要在用的时候按下遥控器就可以完成操作,这就是功能的封装. 在用支付宝进行付款的时候,只需要在用的时候把二唯码给 ...

  3. FTP配置之 chroot_list 用户切换文件夹

    FTP配置文件vsftpd.conf关于限制用户在默认目录的配置,涉及到三个字段:chroot_local_user,chroot_list_enable,chroot_list_file. 我们按顺 ...

  4. Oracle 12cR1 RAC 在VMware Workstation上安装(下)—静默安装

    Oracle 12cR1 RAC 在VMware Workstation上安装(下)—静默安装 1.1  静默安装 1.1.1  静默安装grid 安装之前使用脚本进行校验,确保所有的failed选项 ...

  5. bzoj 4836: 二元运算

    死活TLE....求助 update 4.3 23:08 求助了tls之后终于过了...分治里次数界写崩了...r-l+1就行... 分治的做法很神奇!本题的限制在于操作类型与权值相对大小有关,而用[ ...

  6. 前端系列之CSS基础知识概述

    1.什么是DIV (1).div就是html一个普通标签,进行区域划分.特性:独自占一行.独自不能实现复杂效果.必须结合css样式进行渲染. (2).div通常其是块级元素 (3).div是定义文档中 ...

  7. 前端js代码优化

    今天给大家分享下js代码优化的相关技巧. 1.使用"+"转换为数值     我们平时开发过程中需要将数字字符串创转为number类型,大多数都会用JavaScript parseI ...

  8. 免费 Https 证书（Let's Encrypt）申请与配置

    之前要申请免费的 https 证书操作步骤相当麻烦,今天看到有人在讨论,就搜索了一下.发现现在申请步骤简单多了. 1. 下载 certbot git clone https://github.com/ ...

  9. Linux系统内存占用90%以上——解决方法

    Linux系统内存占用90%以上--解决方法   首先要明确一个问题:Linux系统内存占用90%以上,是否属于正常范围?网上有详细的解释,这属于正常现象~~~    www.2cto.com   L ...

  10. Kubeadm 安装部署 Kubernetes 集群

    阅读目录: 准备工作 部署 Master 管理节点 部署 Minion 工作节点 部署 Hello World 应用 安装 Dashboard 插件 安装 Heapster 插件 后记 相关文章:Ku ...