Highcharts 基本条形图

配置

chart 配置

设置 chart 的 type 属性 为 bar ，chart.type 描述了图表类型。默认值为 "line"。

var chart = {

   type: 'bar'

};

实例

文件名：highcharts_bar_basic.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      type: 'bar'

   };

   var title = {

      text: 'Historic World Population by Region'

   };

   var subtitle = {

      text: 'Source: Wikipedia.org'

   };

   var xAxis = {

      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],

      title: {

         text: null

      }

   };

   var yAxis = {

      min: 0,

      title: {

         text: 'Population (millions)',

         align: 'high'

      },

      labels: {

         overflow: 'justify'

      }

   };

   var tooltip = {

      valueSuffix: ' millions'

   };

   var plotOptions = {

      bar: {

         dataLabels: {

            enabled: true

         }

      }

   };

   var legend = {

      layout: 'vertical',

      align: 'right',

      verticalAlign: 'top',

      x: -40,

      y: 100,

      floating: true,

      borderWidth: 1,

      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

      shadow: true

   };

   var credits = {

      enabled: false

   };

   var series= [{

         name: 'Year 1800',

            data: [107, 31, 635, 203, 2]

        }, {

            name: 'Year 1900',

            data: [133, 156, 947, 408, 6]

        }, {

            name: 'Year 2008',

            data: [973, 914, 4054, 732, 34]

        }

   ];     

   var json = {};

   json.chart = chart;

   json.title = title;

   json.subtitle = subtitle;

   json.tooltip = tooltip;

   json.xAxis = xAxis;

   json.yAxis = yAxis;

   json.series = series;

   json.plotOptions = plotOptions;

   json.legend = legend;

   json.credits = credits;

   $('#container').highcharts(json);

});

</script>

</body>

</html>

尝试一下 »

以上实例输出结果为：

 

Highcharts 堆叠条形图

配置

plotOptions

配置图表堆叠使用 plotOptions.series.stacking，并设置为 "normal"。如果禁用堆叠可设置为 null ， "normal" 通过值设置堆叠， "percent" 堆叠则按百分比。

var plotOptions = {

   series: {

      stacking: 'normal'

   }

};

实例

文件名：highcharts_bar_stacked.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      type: 'bar'

   };

   var title = {

      text: 'Historic World Population by Region'

   };

   var subtitle = {

      text: 'Source: Wikipedia.org'

   };

   var xAxis = {

      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],

      title: {

         text: null

      }

   };

   var yAxis = {

      min: 0,

      title: {

         text: 'Population (millions)',

         align: 'high'

      },

      labels: {

         overflow: 'justify'

      }

   };

   var tooltip = {

      valueSuffix: ' millions'

   };

   var plotOptions = {

      bar: {

         dataLabels: {

            enabled: true

         }

      },

      series: {

         stacking: 'normal'

      }

   };

   var legend = {

      layout: 'vertical',

      align: 'right',

      verticalAlign: 'top',

      x: -40,

      y: 100,

      floating: true,

      borderWidth: 1,

      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

      shadow: true

   };

   var credits = {

      enabled: false

   };

   var series= [{

         name: 'Year 1800',

            data: [107, 31, 635, 203, 2]

        }, {

            name: 'Year 1900',

            data: [133, 156, 947, 408, 6]

        }, {

            name: 'Year 2008',

            data: [973, 914, 4054, 732, 34]

        }

   ];     

   var json = {};

   json.chart = chart;

   json.title = title;

   json.subtitle = subtitle;

   json.tooltip = tooltip;

   json.xAxis = xAxis;

   json.yAxis = yAxis;

   json.series = series;

   json.plotOptions = plotOptions;

   json.legend = legend;

   json.credits = credits;

   $('#container').highcharts(json);

});

</script>

</body>

</html>

尝试一下 »

以上实例输出结果为：

Highcharts 反向条形图

实例

文件名：highcharts_bar_negative.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      type: 'bar'

   };

   var title = {

      text: 'Bar chart with negative values'

   };

   var xAxis = {

      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']

   };

   var credits = {

      enabled: false

   };

   var series= [{

      name: 'John',

            data: [5, 3, 4, 7, 2]

        }, {

            name: 'Jane',

            data: [2, -2, -3, 2, 1]

        }, {

            name: 'Joe',

            data: [3, 4, 4, -2, 5]

      }

   ];     

   var json = {};

   json.chart = chart;

   json.title = title;

   json.xAxis = xAxis;

   json.credits = credits;

   json.series = series;

   $('#container').highcharts(json);

});

</script>

</body>

</html>

尝试一下 »

以上实例输出结果为：

 
 
 

Highcharts 基本条形图；Highcharts 堆叠条形图；Highcharts 反向条形图的更多相关文章

  1. Highcharts Highstock 学习笔记 第一篇 Highcharts配置

    Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达 ...

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

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

  3. 相识Highcharts，几分钟玩转Highcharts

    Highcharts是一个功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 官网:http://www.hcharts.cn/ 我觉得对于刚接触一个东西的新手来说,有时候对一个东西真 ...

  4. HighCharts学习笔记（一）HighCharts入门

    一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...

  5. 【HighCharts系列教程】二、Highcharts结构及API文档

    一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript& ...

  6. Highcharts 测量图；Highcharts 圆形进度条式测量图；Highcharts 时钟；Highcharts 双轴车速表；Highcharts 音量表（VU Meter）

    Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' .chart.type 描述了图表类型.默认值为 "line". ...

  7. Highcharts 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图

    Highcharts 丢失值区域图 chart 配置 将 chart 的 spacingBottom 属性设置为 30.表示图表间的间隔区间. var chart = { type: 'area', ...

  8. Highcharts 时间序列，可缩放的图表；Highcharts X 轴翻转曲线图；Highcharts 带标记曲线图

    Highcharts 时间序列,可缩放的图表 配置 图表 配置可缩放图表. chart.zoomType 指定了用户可以拖放的尺寸,用户可以通过拖动鼠标来放大,可能值是x,y或xy: var char ...

  9. 《Learning Highcharts》中文翻译

    在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...

随机推荐

  1. Bitmap: a C++ class

    Bitmap: a C++ class        The five steps involved to draw a bitmap: Load bitmap using LoadBitmap or ...

  2. 处理函数和数组声明[条款17]---《C++必知必会》

    指向函数的指针声明和指向数组的指针声明容易混淆,原因在于函数和数组修饰符的优先级比指针修饰符的优先级高,因此通常需要使用圆括号. int *f1( );//一个返回值为 int* 的函数 int ( ...

  3. Spring 事务管理tx,aop

    spring tx:advice事务配置 2016年12月21日 17:27:22 阅读数:7629 http://www.cnblogs.com/rushoooooo/archive/2011/08 ...

  4. Python --之练习题

    一,两个小组对战,对战规则如下:team1 = ['a','b','c']team2 = ['x','y','z'] #a 不和x对战,b 不和y,z 对战# for i in team1: #法一# ...

  5. 寻路算法A*, JPS（跳点搜索）的一些杂谈

    A*是一个比较经典的启发式寻路算法.是基于dijkstra算法,但是加入了启发函数,使路径搜索效率更高.实现起来很简单.不过要做到通用性高,比如支持各种不同类型的地图,甚至不仅仅是地图,而是个图结构如 ...

  6. PHP秒杀系统全方位设计分析（二）

    商品页面开发 静态化展示页面[效率要比动态PHP高很多,PHP程序需要解析等步骤,本身就需要很多流程,整个下来PHP的处理花的时间和资源要多] 商品状态的控制 开始前.进行中.库存不足.结束 数据逻辑 ...

  7. addEventListener、onclick和jquery的bind()、click()

    addEventListener("click",function(event){},false); removeEventListener("click",f ...

  8. CSS Border（边框）

    CSS Border(边框) 一.CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 示例效果: 二.边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来 ...

  9. Python3.x：Selenium+PhantomJS爬取带Ajax、Js的网页

    Python3.x:Selenium+PhantomJS爬取带Ajax.Js的网页 前言 现在很多网站的都大量使用JavaScript,或者使用了Ajax技术.这样在网页加载完成后,url虽然不改变但 ...

  10. 你可能不熟悉的JS总结

    暂时性死区 只要块级作用域存在let命令,它所声明的变量就"绑定"这个区域,不再受外部的影响.这么说可能有些抽象,举个例子: var temp = 123; if(true) { ...