快捷導(dǎo)航

詳解利用python-highcharts庫繪制交互式可視化圖表

更新時間：2022年03月02日 16:03:42 作者：寧俊騏

本文主要和大家分享一個超強(qiáng)交互式可視化繪制工具-python-highcharts。python-highcharts就是使用Python進(jìn)行Highcharts項目繪制，簡單的說就是實現(xiàn)Python和Javascript之間的簡單轉(zhuǎn)換層，感興趣的可以了解一下

今天小編給大家推薦一個超強(qiáng)交互式可視化繪制工具-python-highcharts，熟悉HightCharts繪圖軟件的小伙伴對這個不會陌生，python-highcharts就是使用Python進(jìn)行Highcharts項目繪制，簡單的說就是實現(xiàn)Python和Javascript之間的簡單轉(zhuǎn)換層，話不多說，我們直接進(jìn)行介紹，具體包括以下幾個方面：

python-highcharts庫的簡單介紹

python-highcharts 具體案例

python-highcharts庫的簡單介紹

python-highcharts庫作為優(yōu)秀的第三方庫，其實現(xiàn)了對HightCharts項目的Python封裝應(yīng)用，里面關(guān)于圖表細(xì)節(jié)的設(shè)置還是基于Javascript代碼，但較簡單，可以進(jìn)行隨意更改。

需要注意的是，由于HightCharts可以免費用于非商業(yè)用途，所以使用python-highcharts繪制也是如此，商業(yè)用途需要購買單獨的許可證。我們這里當(dāng)作練習(xí)即可~~

python-highcharts庫繪制的圖形主要包括如下類別：

Highcharts：繪制如折線圖、散點圖等常規(guī)圖表；
Highstock：繪制股價走勢圖表；
Highmaps：繪制地圖；

python-highcharts 具體案例

這一部分，小編分別主要介紹Highcharts的樣例，因為Highstock和Highmaps使用較少，且反應(yīng)較慢，這里不做介紹哈。詳細(xì)內(nèi)容如下：

「樣例一」

from?highcharts?import?Highchart?
H?=?Highchart()?

data?=?list(range(1,20))
data2?=?list(range(20,1,-1))?
#繪制
H.add_data_set(data2,'line')
H.add_data_set(data,?'line')
H

Example01 Of Highchart

備注：所有圖表都是交互式的，這里展示的為靜態(tài)圖片。

你還可以通過添加交互點擊時的狀態(tài)，如下：

H.add_data_set(data2,'line')
H.add_data_set(data,?'line',?
????marker={
????????'states':?{
????????????'hover':?{
????????????????'enabled':?True,?
????????????????'fillColor':?'white',?
????????????????'lineColor':?'red',
????????????????'lineWidth':?2
????????????}
????????}
????},
????events={
????????'click':?"function?(event)?{?alert(this.name?+?'?clicked\\n'?+?'Alt:?'?+?event.altKey?+?'\\n'?+?\
?????????????????'Control:?'?+?event.ctrlKey?+?'\\n'?+?'Shift:?'?+?event.shiftKey?+?'\\n');}"},?
????dashStyle='ShortDash'
)

options?=?{
????'xAxis':{
????????'plotBands':?
????????????[{'color':?'#FCFFC5',?'from':?2,?'to':?4},?
????????????{'color':?'#FCFFC5',?'from':?6,?'to':?8},
????????????{'color':?'#FCFFC5',?'from':?10,?'to':?12}]
????????}
}
H.set_dict_options(options)

Example02 Of Highchart

樣例二

這個例子小編獲取Highcharts官網(wǎng)樣例進(jìn)行再現(xiàn)，詳細(xì)如下：

from?highcharts?import?Highchart?
chart?=?Highchart()?

data01?=?[43934,?52503,?57177,?69658,?97031,?119931,?137133,?154175]
data02?=[24916,?24064,?29742,?29851,?32490,?30282,?38121,?40434]
data03?=[11744,?17722,?16005,?19771,?20185,?24377,?32147,?39387]
data04?=?[550,?780,?7988,?12169,?15112,?22452,?34400,?34227]
data05?=?[12908,?5948,?8105,?11248,?8989,?11816,?18274,?18111]

chart.add_data_set(data01,'line',name='安裝，實施人員')
chart.add_data_set(data02,?'line',?name='工人')
chart.add_data_set(data03,'line',name='銷售')
chart.add_data_set(data04,?'line',?name='項目開發(fā)')
chart.add_data_set(data05,'line',name='其他')

options?=?{
?????"title":?{
???????"text":?'2010?~?2016?年太陽能行業(yè)就業(yè)人員發(fā)展情況'},
????"subtitle":?{
??????"text":?'數(shù)據(jù)來源：thesolarfoundation.com'},
????"yAxis":?{
??????"title":?{
?????????"text":?'就業(yè)人數(shù)'
????????}},
?????"legend":?{
????????"layout":?'vertical',
?????????"align":?'right',
?????????"verticalAlign":?'middle'
??????}}
chart.set_dict_options(options)
chart

Example03 Of Highchart

「樣例二」

from?highcharts?import?Highchart?
chart?=?Highchart()?


#name:?'Hestavollane',
data01?=?[4.3,?5.1,?4.3,?5.2,?5.4,?4.7,?3.5,?4.1,?5.6,?7.4,?6.9,?7.1,
??????????7.9,?7.9,?7.5,?6.7,?7.7,?7.7,?7.4,?7.0,?7.1,?5.8,?5.9,?7.4,
??????????8.2,?8.5,?9.4,?8.1,?10.9,?10.4,?10.9,?12.4,?12.1,?9.5,?7.5,
?????????7.1,?7.5,?8.1,?6.8,?3.4,?2.1,?1.9,?2.8,?2.9,?1.3,?4.4,?4.2,
?????????3.0,?3.0]

#name:?'Voll',
data02?=?[0.0,?0.0,?0.0,?0.0,?0.0,?0.0,?0.0,?0.0,?0.1,?0.0,?0.3,?0.0,
??????????0.0,?0.4,?0.0,?0.1,?0.0,?0.0,?0.0,?0.0,?0.0,?0.0,?0.0,?0.0,
??????????0.0,?0.6,?1.2,?1.7,?0.7,?2.9,?4.1,?2.6,?3.7,?3.9,?1.7,?2.3,
??????????3.0,?3.3,?4.8,?5.0,?4.8,?5.0,?3.2,?2.0,?0.9,?0.4,?0.3,?0.5,?0.4]

chart.add_data_set(data01,'spline',name='Hestavollane')
chart.add_data_set(data02,?'spline',?name='Voll')
options?=?{
????"title":?{
???????"text":?'風(fēng)速變化趨勢圖'
?????????????},
????"subtitle":?{
????????"text":?'2009年10月6日和7日兩地風(fēng)速情況'
????????},
???"xAxis":?{
??????"type":?'datetime',
??????"labels":?{
??????"overflow":?'justify'
??????????}
????????},
???"yAxis":?{
??????"title":?{
????????"text":?'風(fēng)?速?(m/s)'
??????????},
??"min":?0,
??"minorGridLineWidth":?0,
??"gridLineWidth":?0,
??"alternateGridColor":?None,
??"plotBands":?[{?#//?Light?air
???"from":?0.3,
???"to":?1.5,
???"color":?'rgba(68,?170,?213,?0.1)',
???"label":?{
????"text":?'輕空氣',
????"style":?{
?????"color":?'#606060'
????}
???}
??},?{?#//?Light?breeze
???"from":?1.5,
???"to":?3.3,
???"color":?'rgba(0,?0,?0,?0)',
???"label":?{
????"text":?'微風(fēng)',
????"style":?{
?????"color":?'#606060'
????}
???}
??},?{?#//?Gentle?breeze
???"from":?3.3,
???"to":?5.5,
???"color":?'rgba(68,?170,?213,?0.1)',
???"label":?{
????"text":?'柔和風(fēng)',
????"style":?{
?????"color":?'#606060'
????}
???}
??},?{?#//?Moderate?breeze
???"from":?5.5,
???"to":?8,
???"color":?'rgba(0,?0,?0,?0)',
???"label":?{
????"text":?'溫和風(fēng)',
????"style":?{
?????"color":?'#606060'
????}
???}
??},?{?#//?Fresh?breeze
???"from":?8,
???"to":?11,
???"color":?'rgba(68,?170,?213,?0.1)',
???"label":?{
????"text":?'清新風(fēng)',
????"style":?{
?????"color":?'#606060'
????}
???}
??},?{?#//?Strong?breeze
???"from":?11,
???"to":?14,
???"color":?'rgba(0,?0,?0,?0)',
???"label":?{
????"text":?'強(qiáng)風(fēng)',
????"style":?{
?????"color":?'#606060'
????}
???}
??},?{?#//?High?wind
???"from":?14,
???"to":?15,
???"color":?'rgba(68,?170,?213,?0.1)',
???"label":?{
????"text":?'狂風(fēng)',
????"style":?{
?????"color":?'#606060'
????}
???}
??}]
?},
?"tooltip":?{
??"valueSuffix":?'?m/s'
?},
?"plotOptions":?{
??"spline":?{
???"lineWidth":?4,
???"states":?{
????"hover":?{
?????"lineWidth":?5
????}
???},
???"marker":?{
????"enabled":?False
???},
???"pointInterval":?3600000,?#//?one?hour
???
??}
?}?
}

chart.set_dict_options(options)
chart

Example04 Of Highchart

小編有話說：基本上官網(wǎng)提供的例子，python-highcharts都是可以實現(xiàn)的，前提是對這個庫有一定的了解程度。當(dāng)然，會一點JS更好~~ 更多關(guān)于此包繪制方法詳細(xì)內(nèi)容可參考：python-highcharts[1] 和HightCharts[2]