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. java实现FTP下载文件

    ftp上传下载文件,是遵照ftp协议上传下载文件的,本例仅以下载文件为例. 重要的方法解释: 1.FTP功能相关依赖路径:org.apache.commons.net.ftp.*: 2.ftp默认端口 ...

  2. Docker+.Net Core 的那些事儿-3.创建容器并运行

    1.根据镜像运行容器 上篇文章建立了一个镜像: 我们以此开始,执行以下命令: docker run -d -p 5000:5000 hwapp:latest 如果返回以上结果表示建立成功. 此时如果你 ...

  3. 论文笔记：CNN经典结构1（AlexNet，ZFNet，OverFeat，VGG，GoogleNet，ResNet）

    前言 本文主要介绍2012-2015年的一些经典CNN结构,从AlexNet,ZFNet,OverFeat到VGG,GoogleNetv1-v4,ResNetv1-v2. 在论文笔记:CNN经典结构2 ...

  4. 在xshell中使用sftp上传文件

    Xshell 5 (Build 1335)Copyright (c) 2002-2017 NetSarang Computer, Inc. All rights reserved. Type `hel ...

  5. C++之操作Excel（抄录https://www.cnblogs.com/For-her/p/3499782.html）

    MFC操作Excel 下面的操作基于Excel2003 一．初始化操作 1.导入类库 点击查看->建立类向导-> Add Class...\From a type Library...-& ...

  6. c++ 中 BOOL与bool TRUE与true FALSE与false 区别

    转自:http://blog.chinaunix.net/uid-28458801-id-3941112.html   FALSE/TRUE与false/true的区别 1.FALSE/TRUE与fa ...

  7. Spark高级数据分析· 6LSA

    潜在语义分析 wget http://dumps.wikimedia.org/enwiki/latest/enwiki-latest-pages-articles-multistream.xml.bz ...

  8. OpenCV KNN 之 使用方法

    http://blog.csdn.net/WL2002200/article/details/43149229 OpenCV 中KNN构造函数如下. C++: CvKNearest::CvKNeare ...

  9. js 判断是ie浏览器

    if (!+[1,]) { //IE window.event.returnValue = false; } else { return false; }

  10. 20145328 《Java程序设计》实验五实验报告

    20145328 <Java程序设计>实验五实验报告 实验名称 Java网络编程 实验内容 用书上的TCP代码,实现服务器与客户端. 客户端与服务器连接 客户端中输入明文,利用DES算法加 ...