zoukankan      html  css  js  c++  java
  • HighCharts之2D含有负值的面积图

    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=" 1200px; height: 500px; margin: 0 auto"></div>
    </body>
    </html>

    2、运行结果



  • 相关阅读:
    Cocos2dx-背景无限循环播放
    centos 7端口和防火墙
    图片裁剪
    spring-boot图片压缩
    vue cli简介
    spring-boot的配置(实时生效)
    spring-boot打成war包放入tomcat运行
    spring-boot上传图片并访问
    linux链接ssh
    mysql远程访问
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315270.html
Copyright © 2011-2022 走看看