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. 动态库Link error 一种可能

    一般出现link error都是链接时找不到对应函数. 前些天出现这种错误,我反复地检查,都发现动态库里明确的是有对应函数的. 代码里有这样一句#pragma comment(lib,"li ...

  2. Vsftp的PASV mode和Port模式配置文件的设置

    FTP模式与数据端口 FTP 分为两类,PORT FTP和PASV FTP,PORT FTP是一般形式的FTP.这两种FTP在建立控制连接时操作是一样的,都是由客户端首先和FTP服务器的控制端口(默认 ...

  3. BZOJ 3123: [Sdoi2013]森林 [主席树启发式合并]

    3123: [Sdoi2013]森林 题意:一个森林,加边,询问路径上k小值.保证任意时刻是森林 LCT没法搞,树上kth肯定要用树上主席树 加边?启发式合并就好了,小的树dfs重建一下 注意 测试点 ...

  4. UVA概率练习[2]

    UVa11021 Tribbles 你有K个麻球.一个只会存活一天.在死亡之前,一个麻球有P_i的概率生出i个麻球(i=0,1,…,n-1).m天后所有麻球都死亡的概率是多少?(包含在第m天前全部死亡 ...

  5. BZOJ 2754: [SCOI2012]喵星球上的点名 [后缀数组+暴力]

    2754: [SCOI2012]喵星球上的点名 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1906  Solved: 839[Submit][St ...

  6. 如何在方法上贴上attribute(特性)捕捉方法的异常,来实现我们的需求

    在方法上贴上attribute(特性)捕捉方法的异常,其实这么做也是为了在项目中不会大量使用try-cacth这样的语句,同时使我们的代码看起来更简洁,更直观,将逻辑业务分离使得后期维护方便.这里我们 ...

  7. LeetCode - 661. Image Smoother

    Given a 2D integer matrix M representing the gray scale of an image, you need to design a smoother t ...

  8. JS声明对象时属性名加引号与不加引号的问题

    般情况下属性名加引号和不加引号是都可以的,效果是一样的. var obj = { name : '你好', 'age' : 1, }; document.write( obj['name'] + '& ...

  9. Docker Centos7 下建立 Docker 桥接网络

    为什么要让docker桥接物理网络? docker默认提供了一个隔离的内网环境,启动时会建立一个docker0的虚拟网卡,每个容器都是连接到docker0网卡上的.而docker0的ip段为172.1 ...

  10. 微信小程序内嵌网页 网站生成小程序

    1. 进入小程序后台 - 设置 - 开发设置 2. 添加业务域名(小程序只支持https) 3. 小程序代码 <web-view src="网址"></web-v ...