<!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. C#判断输入的是否是汉字

    第一种方法:正则表达式 string text = "是不是汉字"; for (int i = 0; i < text.Length; i++) { if (Regex.Is ...

  2. (转)理想化的 Redis 集群

    一个豁达的关键是正确乐观的面对失败的系统.不需要过多的担心,需要一种去说那又怎样的能力.因此架构的设计是如此的重要.许多优秀的系统没有进一步成长的能力,我们应该做的是去使用其他的系统去共同分担工作. ...

  3. javascript笔记—— call 简单理解

    call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN ...

  4. Javascript中的函数

    Javascript中的函数 1.什么是函数 函数是被命名的,独立的,完成特定功能的代码段.其可能给调用它的程序返回值,我们把这个代码段就称之为"函数". 被命名的:函数大部分都是 ...

  5. java访问webservice服务（二）

    欢迎转载,出处http://www.cnblogs.com/shizhongtao/p/3433679.html 利用cxf的框架实现 import javax.xml.namespace.QName ...

  6. Poj 2586 / OpenJudge 2586 Y2K Accounting Bug

    1.Link: http://poj.org/problem?id=2586 2.Content: Y2K Accounting Bug Time Limit: 1000MS   Memory Lim ...

  7. jquery实现视觉滚动--fullpage

    用fullpage.js实现视觉滚动效果 1.Html页面 <!DOCTYPE html> <html> <head> <meta charset=" ...

  8. mysql安装启动教程（两种方法）

    mysql安装启动: 方法一(简单版): cmd进入mysql安装的bin目录:mysqld.exe –install net start mysql  服务启动(或者选择计算机->(右键)管理 ...

  9. SDP协议分析

    一.SDP协议介绍 SDP 完全是一种会话描述格式 ― 它不属于传输协议 ― 它只使用不同的适当的传输协议,包括会话通知协议(SAP).会话初始协议(SIP).实时流协议(RTSP).MIME 扩展协 ...

  10. [msf]那些年儿跑过的字典

    SEC标签里都会说一些网络完全相关的,光说理论也不好,光将工具太肤浅,不做脚本小子,有一句话说的好,我们都知道最酷的是什么?酷的不是“h4ck3r”这两个字,而是技术. OK,-let's go!! ...