來源：Python資料之道
作者：Peter
整理：Lemon
本文重點介紹的是可視化庫
Highcharts
的相關基礎知識，以及如何利用
Highcharts
來繪制不同場景和需求下的精美柱狀圖，主要内容包含：
-
Highcharts
-
Highcharts
-
Highcharts
-
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 https://github.com/kyper-data/python-highcharts
安裝
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': '<b>{series.name}</b><br/>',
'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個基本步驟：
- 導入庫和示例化對象
- 設定各種配置項；配置項都是字典形式
- 往執行個體化對象中添加字典形式的配置項
- 準備資料和往執行個體化對象中添加資料，并設定圖形的相關資訊
- 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: <a href="https://en.wikipedia.org/wiki/World_population" target="_blank" rel="external nofollow" >Wikipedia.org</a>'
},
'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 '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +\
'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': '<b>{point.x}</b><br/>',
'pointFormat': '{series.name}: {point.y}<br/>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': '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
'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': '來源: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population" target="_blank" rel="external nofollow" >維基百科</a>'
},
'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: <b>{point.y:.1f} millions</b>'
},
# 重要設定項
'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
-
Higcharts
作者簡介
Peter，碩士畢業僧一枚，從電子專業自學Python入門資料行業，擅長資料分析及可視化。喜歡資料，堅持跑步，熱愛閱讀，樂觀生活。個人格言：不浮于世，不負于己
個人站點：www.renpeter.cn
往期精彩回顧
适合初學者入門人工智能的路線及資料下載下傳機器學習及深度學習筆記等資料列印機器學習線上手冊深度學習筆記專輯《統計學習方法》的代碼複現專輯
AI基礎下載下傳機器學習的數學基礎專輯
本站qq群704220115，加入微信群請掃碼：