<!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. Cocos2d-x实例：设置背景音乐与音效-设置场景实现

    设置场景(Setting),Setting.h文件代码如下: #ifndef __Setting_SCENE_H__ #define __Setting_SCENE_H__ #include &quo ...

  2. 打包并发布自己的Android应用(eclipse)

    第一步,在Eclipse中选择需要打包的项目,然后右键--选择Export,会弹出一个打包的提示框,如下图所示. 按Next之后,会继续出现一个提示框,这里你可以选择自己需要打包的项目(默认是刚才选中 ...

  3. Linux 下面对物理地址的访问

    参考链接:http://zhuhaibobb.blog.163.com/blog/static/2744006720101049030606/ Linux内核提供了/dev/mem驱动,提供了一种直接 ...

  4. 在使用masm32 rc编译资源文件.rc出现的问题

    fatal error RC1004: unexpected end of file found 很蛋疼.然来是.h宏定义文件中.最后一行加个回车键即可.否则就提示这错误.

  5. Linux 内核 链表 的简单模拟（1）

    第零章:扯扯淡 出一个有意思的题目:用一个宏定义FIND求一个结构体struct里某个变量相对struc的编移量,如 struct student { int a; //FIND(struct stu ...

  6. C插入排序

    #include "stdio.h" int main() { ,,,,,}; int i,j; ;j<]);j++) { int key = a[j]; ;i>=&a ...

  7. c# 海康威视 Winform播放mp4视频

    最近有个视频播放系统,需要对海康的mp4格式视频进行播放,由于普通播放器无法对该视频进行播放原因是海康对视频进行了自己的编码,需要相应的解码才可以对视频进行播放. 下面是对海康威视视频播放的c#代码( ...

  8. JavaScript 高级程序设计 01-基本概念

    一.JavaScript组成 1.一个完成JavaScript是由ECMAScript.DOM.BOM三部分组成的. ECMAScript:提供核心语言功能--语法.类型.语句.关键字.保留字.操作符 ...

  9. CLR via C# 异常管理读书笔记

    1. 设计异常类型层次结构应该浅而宽 2. 注意使用finally块清理资源 3. 不要什么都捕捉 4.得体地从异常中恢复 5.发生不可恢复的异常时回滚部分完成的操作-维持状态 6.隐藏实现细节来维系 ...

  10. 【转】perl中尖括号运算符(＜＞)使用说明

    perl中尖括号运算符的用途分享,这里简单介绍下,方便需要的朋友 perl中<>运算符可以有如下的用途: 1)如果尖括号中间是文件句柄,尖括号运算符允许你读取文件句柄,比如<STDI ...