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
非常的简单:
1 | pip install python-highcharts |
目前python-highcharts
支持Python2.7/3.4+
,python
版本需要满足需求
使用demo
安装好python-highcharts
之后,我们用一个小案例来说明如何通过它绘制图形,首先看看整体的代码和图形:
1 | # 1-导入库和实例化 |
通过上面的代码我们可以看到使用python-highcharts
绘图的5个基本步骤:
- 导入库和示例化对象
- 设置各种配置项;配置项都是字典形式
- 往实例化对象中添加字典形式的配置项
- 准备数据和往实例化对象中添加数据,并设置图形的相关信息
- notebook中在线绘图
绘制精美柱状图📊
基础柱状图
1 | from highcharts import Highchart # 导入库 |
蝴蝶柱状图
两个不同类型的双排柱状图:
1 | from highcharts import Highchart |
垂直柱状图
1 | from highcharts import Highchart # 导入库 |
水平叠加柱状图
1 | from highcharts import Highchart # 导入库 |
带有负值的柱状图
有时候我们的数据中还有负值,利用Highcharts同样可以绘制柱状图:
1 | from highcharts import Highchart # 导入库 |
带有百分比的柱状图
1 | from highcharts import Highchart # 导入库 |
坐标属性倾斜的柱状图
当我们的坐标属性过长的时候,属性值显示在坐标轴上可以倾斜一定的角度:
1 | from highcharts import Highchart # 导入库 |
基于最值的柱状图
通过最小值和最大值可以绘制在区间内变化的柱状图:
1 | from highcharts import Highchart # 导入库 |
多轴柱状图
有时候可以将多个图形放在一个画布中:
1 | from highcharts import Highchart |
总结
本文中我们简单的介绍了可视化库Highcharts
的主要特点和4大利器,同时通过python-highcharts
绘制了多个柱状图的案例,我们可以看到:
Highcharts
的确是非常的强大;如果读者能够很好地掌握前端语言JavaScript
,可以更加灵活地使用Highcharts
- 在利用
python-highcharts
进行绘图的过程中,步骤非常清晰(5个步骤),重点是要掌握配置项的设置 Higcharts
能够满足不同需求下的绘制,绘制的图形动态效果非常明显
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=6iw0v1lyvb92