1. 条形图(Bar Chart)需要的数据格式类型如下:

["Luke Skywalker", "Darth Vader", "Yoda", "Princess Leia"]
[2, 4, 1, 1]

2. Bar Chart代码示例:

$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
allowPointSelect: true
}
},
yAxis:{
min: 0,
title: {
text: 'Sales'
},
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}); // the button action
$('#button').click(function () {
var selectedPoints = $('#container').highcharts().getSelectedPoints();
alert('You selected ' + selectedPoints.length + ' points');
});
});

效果图:

3. 柱状图(Column Chart)与条形图(Bar Chart)的区别是Chart的type属性不同,一个是column,一个是bar,但使用的数据以及格式设置都一样;将条目2中的Chart的type属性改为column,就可以得到如下效果:

4. 如果Bar Chart需要在同一个category中显示不同状态的结果(StackedBar),数据格式就需要做相应修改:

["Luke Skywalker", "Princess Leia", "Yoda", "Darth Vader"]
[{"Completed", [1, 0, 0, 1]},{"Active", [1, 1, 1, 2]},{"Pipeline", [0, 0, 0, 1]}]

代码如下,重要的是在plotOptions中设置series的stacking属性:

$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['One', 'Two', 'Three', 'Four', 'Five']
}, plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
// first stack
{
name: 'A',
data: [29.9, 71.5, 106.4, 129.2, 144.0],
stack: 0
}, {
name: 'B',
data: [30, 176.0, 135.6, 148.5, 216.4],
stack: 0
// second stack
}, {
name: 'C',
data: [106.4, 129.2, 144.0, 29.9, 71.5],
stack: 1
}, {
name: 'D',
data: [148.5, 216.4, 30, 176.0, 135.6],
stack: 1
}
]
});
});

效果如下:

5. 如果需要在Column Chart中显示StackedColumn,可以对条目4中的代码做简单修改即可,重要的是在plotOptions中设置column的stacking属性:

$(function () {
$('#container').highcharts({
chart: {
type: 'column'
}, xAxis: {
categories: ['One', 'Two', 'Three', 'Four', 'Five']
}, plotOptions: {
column: {
stacking: 'normal'
}
}, series: [
// first stack
{
data: [29.9, 71.5, 106.4, 129.2, 144.0],
stack: 0
}, {
data: [30, 176.0, 135.6, 148.5, 216.4],
stack: 0
// second stack
}, {
data: [106.4, 129.2, 144.0, 29.9, 71.5],
stack: 1
}, {
data: [148.5, 216.4, 30, 176.0, 135.6],
stack: 1
}
]
});
});

效果如图:

6.

Highcharts - Bar Chart & Column Chart的更多相关文章

  1. Hello Stacked Column Chart

    <navigation:Page xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/to ...

  2. ASP.Net Chart Control -----Bar and Column Charts

    StackedBar  StackedColumn StackedArea <asp:CHART id="Chart1" runat="server" H ...

  3. [D3] Build a Column Chart with D3 v4

    Column and bar charts are staples of every visualization library. They also make a great project for ...

  4. kendo column chart

     目录 1.用js操作chart, 2.tooltip template鼠标悬浮显示内容, 3.双坐标轴,axisCrossingValues: [0, 30],3指的是跨越横坐标轴标签项数,显示在右 ...

  5. bubble chart|Matrix Scatter|Overlay Scatter|Scatterplots|drop-line|box plot|Stem-and-leaf plot|Histogram|Bar chart|Pareto chart|Pie chart|doughnut chart|

    应用统计学 对类别数据要分类处理: Bar chart复式条形图便于对比: Pareto chart:对类别变量依据频数高低排列: Pie chart:饼图用于一个样本,可以区分类别数据 doughn ...

  6. Matplotlib学习---用matplotlib画饼图/面包圈图(pie chart, donut chart)

    我在网上随便找了一组数据,用它来学习画图.大家可以直接把下面的数据复制到excel里,然后用pandas的read_excel命令读取.或者直接在脚本里创建该数据. 饼图: ax.pie(x,labe ...

  7. 能够将 HTML 表格转换成图表的jQuery插件:Chartinator

    点这里 一个jQuery 插件能够将HTML 表格转换成图表,使用 Google Charts 实现. Chartinator当前支持以下特性: Creation of the following c ...

  8. 微软BI SSRS 2012 Metro UI Win 8 风格的报表课程案例全展示

    开篇介绍 微软BI SSRS 2012 Metro UI 高端报表视频教程 (http://www.hellobi.com/course/15)课程从2014年6月开始准备,于2014年9月在 天善B ...

  9. SpringBoot集成文件 - 如何基于POI-tl和word模板导出庞大的Word文件?

    前文我们介绍了通过Apache POI通过来导出word的例子:那如果是word模板方式,有没有开源库通过模板方式导出word呢?poi-tl是一个基于Apache POI的Word模板引擎,也是一个 ...

随机推荐

  1. (Keil) Debug & Simulation 操作

    0x00 printf在MCU環境下print debug error message,利用Logic Analyzer模擬MCU register or GPIO狀態. 若是要要使用printf函數 ...

  2. uiautomator中文输入

    步骤一: 下载UTF7 IME的整个项目 https://github.com/sumio/uiautomator-unicode-input-helper 选择“Download ZIP”打包下载 ...

  3. P2801 教主的魔法

    传送门 $N$ 太大了主席树过不了 考虑分块 对每个块内的元素排序,询问就对大块二分查找,对两边小的部分暴力枚举 修改时维护 $add[i]$ 标记,维护当前块内整块已经加的数 那么整块的就直接修改 ...

  4. POJ - 3735 循环操作

    构造n+1元组,m次方的矩阵代表循环操作 本题尚有质疑之处(清零操作的正确性还有单位矩阵的必要性),题解可能会改正 #include<iostream> #include<algor ...

  5. [转] CSS 颜色名

    [From] http://www.w3school.com.cn/cssref/css_colornames.asp CSS 颜色名 所有浏览器都支持的颜色名. HTML 和 CSS 颜色规范中定义 ...

  6. PIE SDK中值滤波

    1.算法功能简介 中值滤波是一种最常用的非线性平滑滤波器,它将窗口内的所有像素值按高低排序后,取中间值作为中心像素的新值. 中值滤波对噪声有良好的滤除作用,特别是在滤除噪声的同时,能够保护信号的边缘, ...

  7. V1-Team Scrum Meeting 博客汇总

    V1-Team Scrum Meeting 博客汇总 计划文档 功能规格说明书 技术规格说明书 项目分解 贡献分配规则 一.Alpha阶段 第一次 Scrum Meeting 第二次 Scrum Me ...

  8. python练习七十一:文件操作练习

    假设有关键字存放在text.txt文件中,当用户输入文件中包含的敏感字时,则用星号*替换 例如:用户输入"西安我的故乡"时,则显示为"**我的故乡" 代码; w ...

  9. vue中添加util公共方法&&ES6之import、export

    vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...

  10. 搭架Ubuntu的 apt-cacher服务

    源服务器名称可能不太准确,意思是创建内网自己的私服,这样只要有Ubuntu通过该私服下载安装过软件,私服都会缓存,下一个Ubuntu的请求就直接从缓存中获取. 最近Ubuntu源服务器太慢了,北京的网 ...