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. CodeForces - 528D Fuzzy Search (FFT求子串匹配)

    题意:求母串中可以匹配模式串的子串的个数,但是每一位i的字符可以左右偏移k个位置. 分析:类似于 UVALive -4671. 用FFT求出每个字符成功匹配的个数.因为字符可以偏移k个单位,先用尺取法 ...

  2. HDU - 5406 CRB and Apple (费用流)

    题意:对于给定的物品,求两个在高度上单调不递增,权值上单调不递减的序列,使二者长度之和最大. 分析:可以用费用流求解,因为要求长度和最大,视作从源点出发的流量为2的费用流,建负权边,每个物品只能取一次 ...

  3. C#小票打印机动态纸张尺寸

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. TOSCA自动化测试工具--TestSuite Components

    TestSuite Components 分了6块

  5. nuget发布自已的程序集

    1.nuget注册并获取apikey 2.下载nuget.exe 3.设置apikey nuget setApiKey <apikey> 4.开发程序集 5.进入.csproj目录生成描述 ...

  6. 20145302张薇 Java第一周学习总结

    20145302张薇 <Java程序设计>第一周学习总结 教材学习内容总结 第一章 1995年,java被公认诞生.java第一开始为了消费性数字产品(如手机)而设计,所以java本身有很 ...

  7. RocEDU.阅读.写作《乌合之众》（二）

    第二卷 群体的意见与信念 决定着群体意见与信念的因素分为两类:直接因素与间接因素. 直接因素:使观念采取一定形式并且使它能够产生一定结果的因素. 间接因素:能够使群体接受某些信念并使其难以接受别的信念 ...

  8. MySQL—记录的增删改查操作

    1.插入记录: 方法一:INSERT [INTO] tbl_name [(col_name,···)] {VALUES|VALUE} ({expr |DEFAULT},···),(···),··· 例 ...

  9. SpringCloud Feign报错：Method has too many Body parameters

    1.feign多参数问题 1.1GET方式 错误写法 @RequestMapping(value="/test", method=RequestMethod.GET) Model ...

  10. SaltStack部署配置Tomcat-第三篇

    实验目标 简单部署tomcat及安装java环境 实现步骤 编写salt的状态模块 [root@linux-node1 web]# pwd /srv/salt/base/web [root@linux ...