詳解利用python-highcharts庫繪製互動式視覺化圖表

2022-03-02 19:02:35

今天小編給大家推薦一個超強互動式視覺化繪製工具-python-highcharts，熟悉HightCharts繪圖軟體的小夥伴對這個不會陌生，python-highcharts就是使用Python進行Highcharts專案繪製，簡單的說就是實現Python和Javascript之間的簡單轉換層，話不多說，我們直接進行介紹，具體包括以下幾個方面：

python-highcharts庫的簡單介紹

python-highcharts 具體案例

python-highcharts庫的簡單介紹

python-highcharts庫作為優秀的第三方庫，其實現了對HightCharts專案的Python封裝應用，裡面關於圖表細節的設定還是基於Javascript程式碼，但較簡單，可以進行隨意更改。

需要注意的是，由於HightCharts可以免費用於非商業用途，所以使用python-highcharts繪製也是如此，商業用途需要購買單獨的許可證。我們這裡當作練習即可~~

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

Highcharts：繪製如折線圖、散點圖等常規圖表；
Highstock：繪製股價走勢圖表；
Highmaps：繪製地圖；

python-highcharts 具體案例

這一部分，小編分別主要介紹Highcharts的樣例，因為Highstock和Highmaps使用較少，且反應較慢，這裡不做介紹哈。詳細內容如下：

「樣例一」

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

備註：所有圖表都是互動式的，這裡展示的為靜態圖片。

你還可以通過新增互動點選時的狀態，如下：

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官網樣例進行再現，詳細如下：

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='專案開發')
chart.add_data_set(data05,'line',name='其他')

options = {
     "title": {
       "text": '2010 ~ 2016 年太陽能行業就業人員發展情況'},
    "subtitle": {
      "text": '資料來源：thesolarfoundation.com'},
    "yAxis": {
      "title": {
         "text": '就業人數'
        }},
     "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": '風速變化趨勢圖'
             },
    "subtitle": {
        "text": '2009年10月6日和7日兩地風速情況'
        },
   "xAxis": {
      "type": 'datetime',
      "labels": {
      "overflow": 'justify'
          }
        },
   "yAxis": {
      "title": {
        "text": '風 速 (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": '微風',
    "style": {
     "color": '#606060'
    }
   }
  }, { #// Gentle breeze
   "from": 3.3,
   "to": 5.5,
   "color": 'rgba(68, 170, 213, 0.1)',
   "label": {
    "text": '柔和風',
    "style": {
     "color": '#606060'
    }
   }
  }, { #// Moderate breeze
   "from": 5.5,
   "to": 8,
   "color": 'rgba(0, 0, 0, 0)',
   "label": {
    "text": '溫和風',
    "style": {
     "color": '#606060'
    }
   }
  }, { #// Fresh breeze
   "from": 8,
   "to": 11,
   "color": 'rgba(68, 170, 213, 0.1)',
   "label": {
    "text": '清新風',
    "style": {
     "color": '#606060'
    }
   }
  }, { #// Strong breeze
   "from": 11,
   "to": 14,
   "color": 'rgba(0, 0, 0, 0)',
   "label": {
    "text": '強風',
    "style": {
     "color": '#606060'
    }
   }
  }, { #// High wind
   "from": 14,
   "to": 15,
   "color": 'rgba(68, 170, 213, 0.1)',
   "label": {
    "text": '狂風',
    "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

小編有話說：基本上官網提供的例子，python-highcharts都是可以實現的，前提是對這個庫有一定的瞭解程度。當然，會一點JS更好~~ 更多關於此包繪製方法詳細內容可參考：python-highcharts[1] 和HightCharts[2]

總結

今天這篇推文小編簡單介紹了python-highcharts庫繪製互動式視覺化圖表，給不會JS又想繪製HightCharts樣式圖表的小夥伴提供一種思路，感興趣的小夥伴可以探索一下~~

以上就是詳解利用python-highcharts庫繪製互動式視覺化圖表的詳細內容，更多關於python的資料請關注it145.com其它相關文章！

詳解利用python-highcharts庫繪製互動式視覺化圖表

目錄

python-highcharts庫的簡單介紹

python-highcharts 具體案例

總結

熱門文章