<!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: { pointPadding: 0.2, borderWidth: 0 }

         },

        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柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getCo ...

  2. highcharts 柱状图动态设置数据应用实例

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

  3. highcharts柱状图、饼状图

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. highcharts 柱状图 折线图 混合 双纵轴显示

    $(function () { $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: '' }, colors: ...

  5. Asp.net mvc4 + HighCharts + 柱状图

    前端代码: @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport ...

  6. highcharts柱状图和饼图的数据填充

    1.其实数据填充很简单,它们就是json的格式,然后后台按照这种格式去套数据发给前端:前端再做一下连接处理等就行了. $('#program_statistics_bar').highcharts({ ...

  7. android highcharts 柱状图例子

    android提供achartengine api 只能做简单的,如果是复杂的图表,个人的想法结合highcharts来完成:减小工作量,官方提供的例子也非常丰富. 通过android webview ...

  8. highcharts柱状图实现legend和数据列一一对应效果

    var cate = ['Green', 'Pink']; Highcharts.chart('container', { chart: { type: 'column' }, legend: { e ...

  9. highcharts 柱状图在柱子顶部显示y轴数据

    var plotOptions={ column:{ //borderColor: "#CCCC66",//边框 shadow: true, //阴影 dataLabels:{ / ...

随机推荐

  1. 版本控制工具--GIT 基本命令（1）

    一.安装GIT,在官网上下载安装即可(下面模拟环境是window7) 二.基本操作: 1.创建GIT库: ①先使用mkdir命令创建一个空目录,再使用git init将该目录变成GIT库,会在该目录下 ...

  2. OC1_协议语句

    // // Programmer.h // OC1_协议语句 // // Created by zhangxueming on 15/6/24. // Copyright (c) 2015年 zhan ...

  3. Android类库打包方法探究

    原文地址: http://www.cnblogs.com/wangchuanju/archive/2012/04/05/android_lib_jar.html 开发Android应用的时候,对于可用 ...

  4. UVa11384

    题意:给定正整数n,求把1,2,--,n中所有书都变成0的最少操作次数,每次操作可从序列中选择一个或多个整数,同时减去一个相同的正整数. 分析:如1,2,3,4,5,6, 第一步将4,5,6同时减4, ...

  5. bzoj 1005 HNOI2008 明明的烦恼

    这题做的我欲哭无泪啊…… 我已经没心情多说啥了…… 高精度T啊!我太弱啊!改了一天啊!还不如滚粗啊! 想好式子在写啊! 能用高精度乘单精度就不要用高精度乘高精度啊!     能用高精度除单精度就不要用 ...

  6. Layout.xml中控件的ID命名方式

    控件 缩写 LayoutView lv RelativeView rv TextView tv Button btn ImageButton imgBtn ImageView mgView 或则 iv ...

  7. html的3要素

    在HTML标记语言中可以将每个网页源码分成3部分: 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &q ...

  8. JS基础类型和对象，分别是按值传递还是按引用传递？

    在分析这个问题之前,我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference).在计算机科学里,这个部分叫求值策略(Evaluation Strat ...

  9. 使用node.js抓取有路网图书信息（原创）

    之前写过使用python抓取有路网图书信息,见http://www.cnblogs.com/dyf6372/p/3529703.html. 最近想学习一下Node.js,所以想试试手,比较一下http ...

  10. HTTP的长短连接、长短轮询的区别(转载)

    引言 最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码.在研究一个项目的时候,源码里面用到了HTTP的长轮询.由于之前没太接触过,因此LZ便趁着这个机会,好好了解了一下HT ...