Highcharts快速入门及绘制柱状图

Highcharts快速入门及绘制柱状图

本文重点介绍的是可视化库Highcharts的相关基础知识，以及如何利用Highcharts来绘制不同场景和需求下的精美柱状图，主要内容包含：

• Highcharts简介
• Highcharts有多强
• Highcharts 4大利器
• python-highcharts使用
• 绘制精美柱状图

Highcharts简介

什么是Highcharts

首先看一段来自官网的赞美👍：

Make your data come alive。Highcharts makes it easy for developers to set up interactive charts in their web pages.

Highcharts是一个用纯JavaScript编写的图表库，它能够很简单便捷的在web网站或者是web应用程序中添加有交互性质的图表。

Highcharts是免费提供给个人学习、个人网站和非商业用途的使用的。

中文官网地址：https://www.highcharts.com.cn/

Highcharts特性

Highcharts具备诸多特性，以至于它大受欢迎：

• 兼容性：支持所有主流的浏览器和移动平台（iOS、Android等）
• 多设备：支持多种设备，如手持设备、平板等
• 免费使用：能够供个人免费学习使用
• 配置简单：Highcharts中的数据全部配置成json格式
• 动态多维图表：Highcharts中生成的图表能够修改，同时支持多维图表
• 导出格式多样：能够导出PDF/PNG/JPG/SVG等多种格式
• 可变焦：选中图表部分放大，能够近距离观察图表

上面仅仅是列出了Highcharts的部分特性，它还有时间轴上的时间精确到毫秒、文字可在任意方向旋转等特性。

Highcharts有多强

Highcharts有上面列举的诸多特性，所以它受到了国内外很多大公司的青睐，从它的官网上看到很多知名的企业，比如：Facebook、Twitter、Yahoo、IBM、阿里云等

Highcharts 4大利器

Highcharts之所以如此强大，主要是因为它有4大利器：

• Highcharts
• Highcharts Stock
• Highcharts Maps
• Highcharts Gantt

Highcharts

方便快捷的纯JavaScript 交互性图表。可以说，Highcharts是目前市面上最简单灵活的图表库

Highcharts Stock

方便快捷地创建股票图、大数据量的时间轴图表。

Highstock 是用纯 JavaScript 编写的股票图表控件，可以用来开发股票走势图及大数据量时间轴图表。

Highcharts Maps

非常优秀的HTML5地图组件，支持下钻、触摸、手势等操作。

Highmaps 继承了 Highcharts 简单易用的特性。利用它可以方便快捷的创建用于展示销售、选举结果等其他与地理位置关系密切的交互地图图表。

Highcharts Gantt

最简单好用的JavaScript 甘特图库。

方便易用的交互式甘特图，可以用于展示时间分配、任务调度、事件及资源使用情况。

python-highcharts使用

安装python-highcharts

开头笔者提到过：Highcharts是基于JavaScript编写的图表库。因为很多人并不是很擅长前端语言，所以有位大神编写出来基于Python的第三方的库：python-highcharts，详细说明见github

安装python-highcharts非常地简单：

pip install python-highcharts

目前python-highcharts支持Python2.7/3.4+，python版本需要满足需求！

使用demo

安装好python-highcharts之后，我们用一个小案例来说明如何通过它绘制图形，首先看看整体的代码和图形：

# 1-导入库和实例化
from highcharts import Highchart
chart = Highchart()# 2-配置项设置
options = {'chart': {'inverted': True  # 翻转x轴和y轴},'title': {  # 主标题'text': 'Atmosphere Temperature by Altitude'},'subtitle': {  # 副标题'text': 'According to the Standard Atmosphere Model'},'xAxis': {  # x轴设置'reversed': False,'title': {'enabled': True,'text': 'Altitude'},'labels': {'formatter': 'function () {\return this.value + "km";\}'},'maxPadding': 0.05,'showLastLabel': True},'yAxis': {  # y轴设置'title': {'text': 'Temperature'},'labels': {'formatter': "function () {\return this.value + '°';\}"},'lineWidth': 2},'legend': {  # 图例设置'enabled': False},'tooltip': {  # 提示工具设置'headerFormat': '{series.name}
','pointFormat': '{point.x} km: {point.y}°C'}
}# 3-实例化对象中添加配置
chart.set_dict_options(options)# 4-绘图所需的数据和添加数据
data =  [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
# 添加数据
chart.add_data_set(data, 'spline', 'Temperature', marker={'enabled': False}) # 5-在线绘图
chart

通过上面的代码我们可以看到使用python-highcharts绘图的5个基本步骤：

1. 导入库和示例化对象
2. 设置各种配置项；配置项都是字典形式
3. 往实例化对象中添加字典形式的配置项
4. 准备数据和往实例化对象中添加数据，并设置图形的相关信息
5. notebook中在线绘图并显示

绘制精美柱状图📊

基础柱状图

from highcharts import Highchart   # 导入库 
H = Highchart(width=750, height=600)  # 设置图形的大小# 4组数据，代表4个年份
# 每组5个数据代表的是5个洲
data1 = [107, 31, 235, 203, 24]  
data2 = [133, 156, 947, 868, 106]
data3 = [373, 914, 854, 732, 34]
data4 = [652, 954, 1250, 740, 38]# 进行配置
options = {'chart': {  # 加上chart配置变成水平柱状图'type': 'bar'},'title': {  # 1、主标题'text': 'Stacked bar chart' },'subtitle': {   # 2、副标题'text': 'Source: Wikipedia.org'},'xAxis': {   # 3、横轴的5个分类'categories': ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],'title': {'text': "5个洲"   # x轴的名称}},'yAxis': {'min': 0,  # 设置最小值'title': {'text': '人口数(百万)',  # y轴名称'align': 'high'},'labels': {'overflow': 'justify'}},'tooltip': {'valueSuffix': ' millions'},'legend': {  # 图例设置'layout': 'vertical',   # 垂直方向'align': 'right',  # 靠右显示'verticalAlign': 'top',   # 顶部'x': -40,'y': 80,'floating': True,'borderWidth': 2,    # 图例外围线条宽度'backgroundColor': "((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#9ACFF0')",#图例背景颜色'shadow': True},'credits': {  # 右下角的版权标签'enabled': True},'plotOptions': {'bar': {'dataLabels': {'enabled': True  # 显示数据（柱状图顶部的数据显示出来）}}}
}H.set_dict_options(options)   # 添加配置# 每个年份添加一组数据
H.add_data_set(data1, 'bar', 'Year 2000')
H.add_data_set(data2, 'bar', 'Year 2004')
H.add_data_set(data3, 'bar', 'Year 2008')
H.add_data_set(data4, 'bar', 'Year 2012')H

蝴蝶柱状图

两个不同类型的双排柱状图：

from highcharts import Highchart
H = Highchart(width=550, height=400)# 1、数值分类区间
categories = ['0-4', '5-9', '10-14', '15-19','20-24', '25-29', '30-34', '35-39', '40-44','45-49', '50-54', '55-59', '60-64', '65-69','70-74', '75-79', '80-84', '85-89', '90-94','95-99', '100 + ']
# 2、配置项
# 在这种图形中横轴和纵轴需要调换
options = {'chart': {  #  指定图表类型：柱状图'type': 'bar' },'title': {  # 主标题'text': 'Population pyramid for Germany, midyear 2010'},'subtitle': {  # 副标题'text': 'Source: www.census.gov'},'xAxis': [{  # 左侧标签设置'categories': categories,'reversed': False,   # 分类区间是否翻转'labels': {'step': 1  # 标签区间的间隔}}, {   # 右侧标签设置'opposite': True,'reversed': False,'categories': categories,'linkedTo': 0,'labels': {'step': 1}}],'yAxis': {'title': {'text': None},'labels': {  # y轴标签'formatter': "function () {\return (Math.abs(this.value) / 1000000) + 'M';\}"},'min': -4000000,'max': 4000000},'plotOptions': {'series': {'stacking': 'normal'}},'tooltip': {'formatter': "function () {\return '' + this.series.name + ', age ' + this.point.category + '
' +\'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);\}"},
}# 设置男女的数值
data_male = [-1746181, -1884428, -2089758, -2222362,-2537431, -2507081, -2443179, -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,-2176300, -1329968, -836804, -354784, -90569, -28367, -3878]data_female = [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,1447162, 1005011, 330870, 130632, 21208]# 添加配置项
H.set_dict_options(options)# 添加数据和指定图表类型bar
H.add_data_set(data_male, 'bar', 'Male')
H.add_data_set(data_female, 'bar', 'Female')H

垂直柱状图

from highcharts import Highchart   # 导入库 
H = Highchart(width=800, height=600)  # 设置图形的大小# 配置数据项
data1 = [5, 3, 4, 7, 2]
data2 = [2, 2, 3, 2, 1]
data3 = [3, 4, 4, 2, 5]options = {'chart': {'type': 'column'   # bar改成column},'title': {'text': 'Stacked column chart'},'xAxis': {'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']},'yAxis': {'min': 0,'title': {'text': 'Total fruit consumption'},'stackLabels': {'enabled': True,'style': {'fontWeight': 'bold','color': "(Highcharts.defaultOptions.title.style && \Highcharts.defaultOptions.title.style.color) || 'gray'"}}},'legend': {'align': 'right','x': -30,'verticalAlign': 'top','y': 25,'floating': True,'backgroundColor':"Highcharts.defaultOptions.legend.backgroundColor || 'white'",'borderColor': '#CCC','borderWidth': 1,'shadow': False},'tooltip': {'headerFormat': '{point.x}
','pointFormat': '{series.name}: {point.y}
Total: {point.stackTotal}'},# 在这里设置堆叠的信息'plotOptions': {   # 将每个数据在柱状图上方显示出来'column': {'stacking': 'normal','dataLabels': {'enabled': True  # 显示数据（柱状图顶部的数据显示出来）}}}
}H.set_dict_options(options)   # 添加配置# 将之前的bar改成column即可
H.add_data_set(data1,'column','John')
H.add_data_set(data2,'column','Jane')
H.add_data_set(data3,'column','Joe')H

水平叠加柱状图

from highcharts import Highchart   # 导入库 
H = Highchart(width=800, height=600)  # 设置图形的大小# 配置数据项
data1 = [5, 3, 4, 7, 2]
data2 = [2, 2, 3, 2, 1]
data3 = [3, 4, 4, 2, 5]options = {'chart': {'type': 'bar'  # 图表类型},'title': {  # 主标题'text': 'Stacked bar chart'},'xAxis': {'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']},'yAxis': {'min': 0,'title': {'text': 'Total fruit consumption'}},'legend': {'reversed': True},'plotOptions': {'series': {'stacking': 'normal'}}
}H.set_dict_options(options)   # 添加配置H.add_data_set(data1,'bar','John')
H.add_data_set(data2,'bar','Jane')
H.add_data_set(data3,'bar','Joe')H

带有负值的柱状图

有时候我们的数据中还有负值，利用Highcharts同样可以绘制柱状图：

from highcharts import Highchart   # 导入库 
H = Highchart(width=800, height=600)  # 设置图形的大小# 配置数据项
data1 = [5, 3, -4, 7, 2]
data2 = [2, 2, 3, -2, 1]
data3 = [-3, 4, 4, 2, 5]options = {'chart': {  # 图表类型不是bar，而是column'type': 'column'  },'title': {  # 主标题'text': 'column with negative values'},'xAxis': {'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']},'yAxis': {'title': {'text': '水果数量',  # y轴名称'align': 'high'},'labels': {'overflow': 'justify'}},'legend': {'reversed': True},'credits': {  # 右下角的版权信息'enabled': False},'plotOptions': {   # 将每个数据在柱状图上方显示出来'bar': {'dataLabels': {'enabled': True  # 显示数据（柱状图顶部的数据显示出来）}}} 
}H.set_dict_options(options)   # 添加配置
H.add_data_set(data1,'bar','John')
H.add_data_set(data2,'bar','Jane')
H.add_data_set(data3,'bar','Joe')H

带有百分比的柱状图

from highcharts import Highchart   # 导入库 
H = Highchart(width=800, height=600)  # 设置图形的大小# 配置数据项
data1 = [5, 3, 4, 7, 2]
data2 = [2, 2, 3, 2, 1]
data3 = [3, 4, 4, 2, 5]options = {'chart': {'type': 'column'  # 图表类型},'title': {  # 主标题'text': '带有百分比的柱状图'},'xAxis': {'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']},'yAxis': {'min': 0,'title': {'text': 'Total fruit consumption'}},'tooltip': {'pointFormat': '{series.name}: {point.y} ({point.percentage:.0f}%)
','shared': True},'legend': {'reversed': True},'plotOptions': {'series': {   # 将stacking参数设置成percent'stacking': 'percent'   # 多种取值：normal+percent}}
}H.set_dict_options(options)   # 添加配置H.add_data_set(data1,'bar','John')
H.add_data_set(data2,'bar','Jane')
H.add_data_set(data3,'bar','Joe')H

坐标属性倾斜的柱状图

当我们的坐标属性过长的时候，属性值显示在坐标轴上可以倾斜一定的角度：

from highcharts import Highchart   # 导入库 
H = Highchart(width=800, height=600)  # 设置图形的大小data = [['Shanghai', 24.2],['Beijing', 20.8],['Karachi', 14.9],['Shenzhen', 13.7],['Guangzhou', 13.1],['Istanbul', 12.7],['Mumbai', 12.4],['Moscow', 12.2],['São Paulo', 12.0],['Delhi', 11.7],['Kinshasa', 11.5],['Tianjin', 11.2],['Lahore', 11.1],['Jakarta', 10.6],['Dongguan', 10.6],['Lagos', 10.6],['Bengaluru', 10.3],['Seoul', 9.8],['Foshan', 9.3],['Tokyo', 9.3]]options = {'chart': {'type': 'column'},'title': {'text': '2017年度世界大城市'},'subtitle': {   # 带上了url地址，点击进入链接的文章中'text': '来源: 维基百科'},'xAxis': {'type': 'category','labels': {'rotation': -45,   # 控制倾斜方向：+ 表示向右倾斜'style': {'fontSize': '12px',  # 字体设置'fontFamily': 'Verdana, sans-serif'}}},'yAxis': {'min': 0,'title': {'text': '人口数(百万)',
#             'rotation': -1,
#             'style': {
#                 'fontSize': '13px',
#                 'fontFamily': 'Verdana, sans-serif'
#             }}},'legend': {'enabled': False},'tooltip': {   # 当鼠标放到柱子上去的时候显示的内容'pointFormat': 'Population in 2017: {point.y:.1f} millions'},# 重要设置项'plotOptions': {   # 将每个数据在柱状图上方显示出来'column': {'stacking': 'normal','dataLabels': {'enabled': True,'inside': False,'rotation': -1,'color': '#FFFFFF',
#                 'align': 'left','format': '{point.y:.1f}', 'y': 10,   # 10 pixels down from the top
#                 'style': {
#                     'fontSize': '15px',
#                     'fontFamily': 'Verdana, sans-serif'
#                 }}}}
}H.set_dict_options(options)   # 添加配置H.add_data_set(data,'column','Population')H

基于最值的柱状图

通过最小值和最大值可以绘制在区间内变化的柱状图：

from highcharts import Highchart   # 导入库 
H = Highchart(width=800, height=600)  # 设置图形的大小data_range = [[-9.9, 10.3],[-8.6, 8.5],[-10.2, 11.8],[-1.7, 12.2],[-0.6, 23.1],[3.7, 25.4],[6.0, 26.2],[6.7, 21.4],[3.5, 19.5],[-1.3, 16.0],[-8.7, 9.4],[-9.0, 8.6]]options = {'chart': {'type': 'columnrange','inverted': True},#     # Note: Prefer using linkedDescription or caption instead.
#     'accessibility': {   # 取消了该属性
#         'description': 'Image description'
#     },'title': {'text': 'title'},'subtitle': {'text': 'subtitle'},'xAxis': {'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},'yAxis': {'title': {'text': 'Temperature ( °C )'}},'tooltip': {'valueSuffix': '°C'},'legend': {'enabled': False},'plotOptions': {'columnrange': {'dataLabels': {'enabled': True,'format': '{y}°C'}}}
}H.set_dict_options(options)   # 添加配置H.add_data_set(data_range,'columnrange','Temperatures')  # 添加数据H

多轴柱状图

有时候可以将多个图形放在一个画布中：

from highcharts import Highchart
H = Highchart(width=850, height=400)# 3组不同的数据：降雨量、气压、温度
data1 = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
data2 = [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7]
data3 = [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]options = {'chart': {  'zoomType': 'xy'  # xy缩放变化},'title': {  # 标题设置'text': 'Average Monthly Weather Data for Tokyo'},'subtitle': {'text': 'Source: WorldClimate.com'},'xAxis': [{  # x轴数据'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],'crosshair': True   # True 表示启用竖直方向的十字准星；[true, true] 启动横纵两个轴}],# y轴有3个属性设置'yAxis': [   # 列表中3个元素：温度、降雨量、气压# 1-温度{ 'labels': {'format': '{value}°C',  #  温度数据的单位设置'style': {'color': 'Highcharts.getOptions().colors[2]'  # 索引为2，取出第3个图}},'title': {'text': 'Temperature',  # 名字设置'style': {'color': 'Highcharts.getOptions().colors[2]'}},'opposite': True  # 纵坐标默认在左边，”相反opposite“取右边的位置},   # 2-降雨量{ 'labels': {  'format': '{value} mm',  # 单位设置'style': {'color': 'Highcharts.getOptions().colors[0]'}},'gridLineWidth': 0,   # 线宽（水平方向的灰色线条）'title': {'text': 'Rainfall',   # 名字设置'style': {'color': 'Highcharts.getOptions().colors[0]'}}},# 3-气压{'labels': {  # 海平面气压数据'format': '{value} mb','style': {'color': 'Highcharts.getOptions().colors[1]'}},'opposite': True,   # 纵坐标右侧显示'gridLineWidth': 0,'title': {'text': 'Sea-Level Pressure',  # 纵轴标题名字设置'style': {'color': 'Highcharts.getOptions().colors[1]'}}}],'tooltip': {   # 数据提示框，鼠标放上去显示3个坐标的数据'shared': True,},'legend': {'layout': 'vertical',  # 图例垂直显示；horizontal水平显示（并排）'align': 'left',  # 图例靠左'x': 80,  # 图例到y轴距离'verticalAlign': 'top','y': 55,  # 图例到x轴距离'floating': True,  # 图例是否可以显示在图形：False表示图例和图形完全分开'backgroundColor': "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'"  # 图例背景色},
}
H.set_dict_options(options)# 如何绘制多个图形
# 设置项options中3者顺序：温度（0）、降雨量（1）、气压（2）
# 添加的数据化顺序和坐标轴的顺序要保持一致H.add_data_set(data1,  # 添加数据（降雨量）-colors[0]'column',  # 指定图形类型：柱状图'Rainfall', # 名称yAxis=1, tooltip={'valueSuffix': ' mm'  # 提示数据的单位})H.add_data_set(data2,  # 气压-colors[1]'spline',  # spline表示圆滑的曲线；line表示折线'Sea-Level Pressure', yAxis=2 ,marker={'enabled': True   # 标记：F表示虚点；T表示实点},dashStyle='shortdot',  #  在图形中直接显示markder；设置成False则需要鼠标放上去才会出现markder点tooltip={'valueSuffix': ' mb'  })
H.add_data_set(data3,  # 温度-colors[2]'spline', 'Temperature',yAxis=0,tooltip={'valueSuffix': ' °C'})H

总结

本文中我们简单的介绍了可视化库Highcharts的主要特点和4大利器，同时通过python-highcharts绘制了多个柱状图的案例，我们可以看到：

• Highcharts的确是非常的强大；如果读者能够很好地掌握前端语言JavaScript，可以更加灵活地使用Highcharts
• 在利用python-highcharts进行绘图的过程中，步骤非常清晰（5个步骤），重点是要掌握配置项的设置
• Higcharts能够满足不同需求下的绘制，绘制的图形动态效果非常明显

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！