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. linux下磁盘占用达到100%了,找不到哪些大文件耗尽了磁盘

    Linux下的根分区使用率100%,但是查看/分区下的目录都不大,没有占用满,这该怎么处理? 重启是肯定有效的,目前处理情况:重新restart应用后,空间释放出来 1.lsof | grep del ...

  2. R语言-单一变量分析

    R语言简介: R语言是一门专用于统计分析的语言,有大量的内置函数和第三方库来制作基于数据的表格 准备工作 安装R语言 https://cran.rstudio.com/bin/windows/base ...

  3. MySQL笔记-语句的执行顺序

    在一次查询线上问题时发现有以下两条同样的SQL,执行后数据的顺序不一样: SELECT * FROM nns_assists_item AS asset WHERE asset.nns_assist_ ...

  4. JavaBean命名规范

    ———————————————————————————————————————————————————————— 属性名/类型                    |                 ...

  5. bzoj 4546: codechef XRQRS [可持久化Trie]

    4546: codechef XRQRS 可持久化Trie codechef上过了,bzoj上蜜汁re,看别人说要开5.2e5才行. #include <iostream> #includ ...

  6. jquery参考手册

    开始使用 jQueryjQuery 本身只有一个 js 文件,所以,要使用它,就和使用其它的 js 文件一样,直接将它引入就可以使用了. <script type="text/java ...

  7. 使用 RxJS 实现一个简易的仿 Elm 架构应用

    使用 RxJS 实现一个简易的仿 Elm 架构应用 标签(空格分隔): 前端 什么是 Elm 架构 Elm 架构是一种使用 Elm 语言编写 Web 前端应用的简单架构,在代码模块化.代码重用以及测试 ...

  8. Python数据结构之三——dict（字典）

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 知识源于生活.Python也是如此. 提到字典,我首先想到的是数学大师--高斯. 为何想起他呢?这主要是因为高斯算法 ...

  9. python爬虫（5）——正则表达式（二）

    前一篇文章,我们使用re模块来匹配了一个长的字符串其中的部分内容.下面我们接着来作匹配"1305101765@qq.com   advantage  314159265358 1892673 ...

  10. Jenkins实现PHP的自动部署

    1.汉化jenkins 1).安装汉化包 系统管理 -> 插件管理 -> 安装插件 ->选择插件(Locale plugin) 2).设置语言为中文 系统管理 -> 系统设置 ...