當前位置：首頁 > 编程语言 > python >内容正文

python

Python应用实战-用Highcharts实现可视化分析

發布時間：2023/12/2 python 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 Python应用实战-用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 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':?'{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個基本步驟：

導入庫和示例化對象

設置各種配置項；配置項都是字典形式

往實例化對象中添加字典形式的配置項

準備數據和往實例化對象中添加數據，并設置圖形的相關信息

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">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?''?+?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

水平疊加柱狀圖

帶有負值的柱狀圖

有時候我們的數據中還有負值，利用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)??#?設置圖形的大小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">維基百科</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:?{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?能夠滿足不同需求下的繪制，繪制的圖形動態效果非常明顯。

總結

以上是生活随笔為你收集整理的Python应用实战-用Highcharts实现可视化分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Python较为经典的53个Python
下一篇： Python应用实战-Python爬取4