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. display:inline-block下，元素不能在同一水平线及元素间无margin间距的问题解决方法

    在前端页面编辑中,常常用于块元素横排列时,我们会用到浮动或者dispaly:inline-block: 浮动虽然好用,效果明显,但是会存在潜在BUG,(暂且不论):那么display:inline-b ...

  2. [Sdoi2017]新生舞会 [01分数规划 二分图最大权匹配]

    [Sdoi2017]新生舞会 题意:沙茶01分数规划 貌似\(*10^7\)变成整数更科学 #include <iostream> #include <cstdio> #inc ...

  3. 夏令营提高班上午上机测试 Day 1 解题报告

    Day 1的题难度上来说不算太高,但是T2和T3还是有一定的思维量的. 一个比较好的开始.虽然AK的人只有几个.. (懒得去翻result了..忘了当时拿了多少分了 (哦,前两天我们机房是没有成绩的, ...

  4. Go基础之--接口

    定义 在Go语言中,一个类只要实现了接口要求的所有函数,我们就说这个类实现了该接口 interface类型可以定义一组方法,用来表示一个对象的行为特征,interface不能包含任何变量,接口是引用类 ...

  5. oneNote总结

    22.添加附加文件删除后,文件大小没有发生改变的(优化文件和清空回收站)

  6. Windows Server 2016-查询FSMO角色信息的三种方法

    FSMO操作主机角色有五种:林范围操作主机角色有两种,分别是 架构主机角色(Schema Master)和 域命名主机角色(Domain Naming Master):及域范围操作主机角色三种,分别是 ...

  7. Discuz的安装与使用

    Discuz的安装与使用 一.Discuz的安装 由于本机已经安装好XAMPP集成工具,后续Discuz访问数据库以及服务器等都是基于XAMPP环境.在主机localhost根目录下新建bbs文件夹. ...

  8. springboot入门_helloworld

    开始学习springboot,在此做记录,有不正确之处,还望读者指正. springboot框架的设计目的是用来简化新Spring应用的初始环境搭建以及开发过程.主要体现有:1 xml配置文件,使用s ...

  9. 基于JDK1.8的HashMap分析

    HashMap的强大功能,相信大家都了解一二.之前看过HashMap的源代码,都是基于JDK1.6的,并且知其然不知其所以然,现在趁着寒假有时间,温故而知新.文章大概有以下几个方面: HashMap的 ...

  10. OpenCMS模板的导出和OpenCMS网站的导出

    1.OpenCMS模板的导出 (1)切换到Administration视图,单击Module Management,如图所示:   (2)导出位置:tomcat根目录\webapps\opencms\ ...