<!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. 值类型与引用类型(特殊的string) Typeof和GetType() 静态和非静态使用 参数传递 相关知识

    学习大神博客链接: http://www.cnblogs.com/zhili/category/421637.html 一 值类型与引用类型 需要注意的string 是特殊类型的引用类型. 使用方法: ...

  2. 【转】DataGridView绑定数据源的几种方式

    第一种:DataSet ds=new DataSet (); this.dataGridView1.DataSource=ds.Table[0]; 第二种:DataTable dt=new DataT ...

  3. EF迁移

    第一步是为上下文启用迁移Enable-Migrations 命令 Add-Migration AddBlogUrl 将根据自创建上次迁移以来您对模型所做的更改,为下一次迁移搭建基架. Update-D ...

  4. css中单位px，em，rem的区别

    1,px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 2,em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...

  5. php环境扩展包so

    http://files.cnblogs.com/files/adtuu/no-debug-non-zts-20121212.zip /Applications/XAMPP/xamppfiles/li ...

  6. phpcms常用接口调用方法

    常用函数 , 打开include/global.func.php,下面存放一些公共函数 view plaincopy to clipboardprint?function str_charset($i ...

  7. RFC822DateGMT

    function RFC822DateGMT(dd: TDateTime): string; const Days:..] of string= ('Sun','Mon','Tue','Wed','T ...

  8. CCNP第三天 EIGRP综合实验

    实验题如图所示:其中R2连R3 R5为快速以太网线,其他均为串线,帧中继默认是富曼斯(全连网状结构),即所有接入的路由之间的PVC都已经打通,所有  要关闭R5和R8的逆向arp功能,来手工配置R5到 ...

  9. Catalyst揭秘 Day5 optimizer解析

    Catalyst揭秘 Day5 optimizer解析 Optimizer是目前为止中catalyst中最重要的部分.主要作用是把analyzed logicalPlan变成optimized Log ...

  10. Opencv 的数据结构

    opencv的基本数据结构 结构 成员 意义 CvPoint int x,y 图像中的点 CvPoint2D32f float x,y 二维空间中的点 CvPoint3D32f float x,y,z ...