<!doctype html>

<html lang="en">

    <head>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script type="text/javascript" src="js/highcharts.js"></script>

        <script type="text/javascript" src="js/exporting.js"></script>

        <script>

            $(function () {

    $('#container').highcharts({

        chart:{

            type:'column'

        },

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']

        },

        yAxis: {

            title: {

                text: 'Temperature (°C)'

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: '#808080'

            }]

        },

        tooltip: {

            formatter:function(){

                return '<b>'+this.x + '</b><br/>' + this.series.name + ':' + this.y + '<br/>' + 'Total:' + this.point.stackTotal;

            },

            valueSuffix: '°C'

        },

         plotOptions: {

             column: {

                 stacking: 'normal',

                 dataLabels: { enabled: true,

                              color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' }

             }

         },

        legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle',

            borderWidth: 0

        },

        series: [{

            name: 'Tokyo',

            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]

        }, {

            name: 'New York',

            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]

        }, {

            name: 'Berlin',

            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0]

        }]

    });

});

        </script>

    </head>

    <body>

        <div id="container" style="min-width:700px;height:400px"></div>

    </body>

</html>

highcharts 柱形堆叠图的更多相关文章

  1. Highcharts柱形范围图使用示例

    功能需求:统计三种不同的状态在一天的时间段里面所占的范围 第一步:引入highcharts.js和highcharts-more.js文件 引入文件文件源码:下载https://img.hcharts ...

  2. highchart柱状堆叠图动态数据请求

    $(function () { var options = { chart: { renderTo: 'indoor', type: 'column', }, title: { text: '室内问题 ...

  3. java项目使用Echarts 做柱状堆叠图，包含点击事件

    基础知识请自行百度查看,以下直接贴出实现代码: <%@ page pageEncoding="UTF-8"%><!DOCTYPE html><html ...

  4. 可视化操作，实现横向柱形echart图 无边框

    图片的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  5. Highcharts 柱图 每个柱子外围的白色边框

    Highcharts 柱图中每条柱外会有默认白色的边框, 去边框代码如下: plotOptions: { bar: { borderColor: "",//去边框 } }

  6. Highcharts 基本区域图；Highcharts 使用负数区域图；Highcharts 堆叠区域图；Highcharts 百分比堆叠区域图

    Highcharts 基本区域图 配置 chart chart.type 配置项用于设定图表类型,默认为 "line",本章节我们使用 'area'. var chart = { ...

  7. 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图

    1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...

  8. echarts堆叠图添加总量

    echarts在使用中往往会遇到需要展示总量信息的情况,比较典型的就是3维统计的堆叠柱状图 堆叠是在柱状图的基础上,给几项设置同一stack来实现的.不考虑在tips中实现总和,有两种方式可以实现总和 ...

  9. [Swift通天遁地]三、手势与图表-(12)创建复合图表：包含线性图表和柱形图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. Objective-C 【完整OC项目-购票系统-系统分析-代码实现】

    电影院买票系统/演唱会买票系统 需求分析: 首先我们进入系统,然后会选择买电影票还是买演唱会票,所以这牵扯两个系统的合成.但是我们知道都是买票系统,所以我们可以先创建一个类,属于购买电影票和演唱会的票 ...

  2. ASP.NET MVC3 使用kindeditor编辑器获取不到值

    做开发真的是会遇到各种问题,如果不亲自尝试,不动手,很难发现问题. 下面我们说下在MVC中的用法 1,首先引入js文件 <script type="text/javascript&qu ...

  3. emacs_1

    --> 正在处理依赖关系 perl(VMS::Filespec),它被软件包 perl-PathTools-3.2701-1.el5.rf.x86_64 需要---> 软件包 perl-p ...

  4. ubuntu 12.04 clang 3.4 安装

    作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4137402.html 1.添加clang源 deb http://llvm.org/apt/ ...

  5. DTCMS规格统一赋值

    admin\article_edit.aspx 已经存在 市场价格 和销售价格统一赋值 //赋值规格市场价格 $("#field_control_market_price").bl ...

  6. STM32F10XXX 启动设置

    在STMF103XXX 里,可以通过Boot[1:0]引脚选择3种不同的启动模式:       启动模式选择引脚      启动模式                 说明   BOOT1   BOOT ...

  7. 一款jquery写出来的tab切换

    当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...

  8. ECSHOP如何解决购物车中商品自动消失问题

    最近有客户反映关于ECShop购物车的问题:需要加入多个商品到购物车时,发现之前加入到购物车的商品都自动消失了,只有最后一次加入购物车的商品在里面.那么,这是什么原因呢? 因为ECShop的SESSI ...

  9. 使用jQuery的9个误区

    千万别忘记了使用最新的版本哦,毕竟每个版本更新肯定会在功能或性能上有所提升,或者修复了几个Bug,但有时惰性让人不想再去研究新版本的变化,因此,提醒你别忘记了在新项目用新的一定比旧版本要好. AD: ...

  10. Spark Streaming揭秘 Day14 State状态管理

    Spark Streaming揭秘 Day14 State状态管理 今天让我们进入下SparkStreaming的一个非常好用的功能,也就State相关的操作.State是SparkStreaming ...