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. Chrome中xpath表达式巧妙获取

    对于xpath语法不熟悉,或者要快速匹配出xpath的小伙伴来说这种方式是最快捷的了. 步骤如下: 1.打开chrome 2.ctrl + shift + c 个人比较喜欢用快捷键,不喜欢用快捷键的就 ...

  2. 基于Java的Arc Engine二次开发的环境的配置

    1.软件准备 ArcGIS for Desktop 10.2, Arc engine, jdk-7u60-windows-i586,Eclipse Mar2 2.软件的安装 2.1 ArcGIS fo ...

  3. Jmeter_脚本参数化与内存溢出的解决方案

    这一篇文章随便说一下JMETER的脚本参数化 1:Parameters的两种参数化方法 1.1:函数助手参数化 首先准备你的参数数据.我在bin/data中新建了一个dat文件,记事本另存为修改编码为 ...

  4. BZOJ 1202: [HNOI2005]狡猾的商人 [带权并查集]

    题意: 给出m个区间和,询问是否有区间和和之前给出的矛盾 NOIp之前做过hdu3038..... 带权并查集维护到根的权值和,向左合并 #include <iostream> #incl ...

  5. 移植cjson到windows下编译

    #起因 在工作过程中发现需要让Lua支持json库,如果直接用lua版本的json解析器的话效率不够高,所以找了一个用C实现的json库--cjson,据说此库比lua版本的效率高10-20倍.但是c ...

  6. WinSock IOCP 模型总结(附一个带缓存池的IOCP类)

    前言 本文配套代码:https://github.com/TTGuoying/IOCPServer 由于篇幅原因,本文假设你已经熟悉了利用Socket进行TCP/IP编程的基本原理,并且也熟练的掌握了 ...

  7. 快速构建一个简单的单页vue应用

    技术栈 vue-cli webpack vux,vux-loader less,less-loader vue-jsonp vue-scroller ES6 vue-cli:一个vue脚手架工具,利用 ...

  8. Leetcode刷题C#版之Toeplitz Matrix

    题目: Toeplitz Matrix A matrix is Toeplitz if every diagonal from top-left to bottom-right has the sam ...

  9. Dagger2 使用全解析

    Dagger2 使用全解析 Dagger是一个注入工具,何为注入,我们要生产一批机器人,每个机器人都有一个控制器,我们可以在机器人内部 new 出一个控制器: class Robot { val co ...

  10. python学习：调用其他函数

    vim wc.py   #!/usr/bin/python   def wordCount(s):     chars = len(s)     words = len(s.split())     ...