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. zookeeper，win版本搭建集群遇坑记录

    版本:3.4.10 问题:启动 zkServer.cmd时报错如下, 解决办法: bin目录下 zkEnv.cmd配置 修改为: 把双引号放在外面. 此时运行zkServer.cmd 用zkCli.c ...

  2. .net中关于Windows窗体程序和Web网站程序调用自己的服务

    在.NET Framework 4.0创建服务是中没有像3.5那样的选择新建-网站-ASP.NET Web服务模块,但在4.0中可以选择 新建-网站-ASP.NET空网站-选中项目右键添加新项- 选择 ...

  3. xBIM 应用与学习 （一）

    目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...

  4. 洛谷 [P1402] 酒店之王

    有两个约束条件的二分图匹配 我们回忆一下二分图匹配的匈牙利算法的具体流程,它是通过寻找增广路来判断最大匹配数的,我们再观察一下题目中的两个条件,只有两个条件都满足,才算找到一条增广路,所以我们可以分别 ...

  5. BZOJ 3669: [Noi2014]魔法森林 [LCT Kruskal | SPFA]

    题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,…,n,边标号为 1,2,3,…, ...

  6. JS 特殊字符的验证的问题

    个人的JS 的收集方便下次的使用做百度查询: 1. 特殊字符的验证: var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].&l ...

  7. Office 365 机器人（Bot）开发入门指南 (新篇)

    最近在整理书稿时,发现我在2017年7月份写的这篇 Office 365 机器人(Bot)开发入门 的内容,因为相关平台的升级,已经完全不能体现当前的开发过程,所以我再专门写一篇新的开发入门指南给有兴 ...

  8. 自兴人工智能------------python入门基础（2）列表和元祖

    一.通用序列操作: 列表中所有序列都可以进行特定的操作,包括索引(indexing).分片(slicing).序列相加(adding).乘法,成员资格,长度,最小值,最大值,下面会一一介绍这些操作法. ...

  9. Selenium_chromedriver与chrome版本映射表(更新至v2)

    chromedriver.exe下载地址:http://chromedriver.storage.googleapis.com/index.html chromedriver版本 支持的Chrome版 ...

  10. redis新手入门，摸不着头脑可以看看<二>

    对<Redis开发与运维>的理解--下文中引号部分来自该书,略有修改 P19.  Redis有序集合(图2-1) "Redis有序集合和集合一样也是某种类型元素的集合,不重复.不 ...