[資料視覺化 Data Visualization]Part3 -工具在手，跟我走，開始來畫圖之直條圖

前兩週我們說明了為什麼要畫圖表 ，[資料視覺化 Data visualization] Part1-前言，文字、表、圖哪個比較直覺？ 與 [資料視覺化 Data Visualization] Part2-我有資料，要畫什麼圖呢？
現在開始就來說明圖表怎麼畫，介紹之前先說明一下這次我們使用的工具，我們所有的範例採用Python Code來完成，搭配pyecharts套件．

為什麼要用pyecharts?

不可否認，我認為強大的資料處理莫過於微軟的Excel，只要你會使用他的樞紐分析或加些VBScript應該可以完成很多事情，如下你可以想像這是Excel畫出來的嗎？(Ref:日本神人爺爺用Excel繪製的驚人作品)所以我說他是最神的的工具．

excel繪圖

在Python中，大家比較常用的應該是Matplotlib來畫基本圖表，我個人也覺得是蠻適合做一些資料分析應用，但因為有時候圖表還希望有些互動性或因為我的專案需求需要顯示在前端，那這樣就未必夠用．

Matplotlib

而如果非自己寫程式，採用商業應用想快速拖拉，其實現在各大廠都有自己的視覺化工具，例如Tableau，透過拖拉非常的好用，對於想快速分析不寫程式的商務人士非常適合．

tableau

最早我嘗試了echarts但是使用上你要多會JavaScript語言，以有些進入Python領域中的使用者未必熟悉其他前端語言，所以會造成更多的學習障礙，故後來發現pyecharts這樣的套件可以說是有如神助，用後端語言寫前端程式，減少了一些障礙．

聰明的您會發現echarts跟pyehcarts好像只差的py?對沒錯，echarts是一套基於JavaScript的圖表工具，由百度開源的工具，目前在Apache基金會底下，其實pyechrts就是從echarts移植過來在Python上使用的，所以兩個有相似之處，也都是OpenSoruce應用，不過他有以下好處，所以將以pycharts來跟各位介紹如何畫圖表:

1. 開源應用
2. 支援30種以上常見圖表
   

   echarts與pyehcarts

3. 用過Python的人都知道，Jupyter Notebook ，是一個蠻好入門編寫軟體的介面，所以他也支援Jupyter Notebook 和 JupyterLab，直接呈現圖片
4. 畫好的可直接轉換成html網頁
5. 支援Python Web應用，如 Flask，Sanic，Django ，這樣前後端都可以用同一套語言進行撰寫
6. 支援地圖模式與百度地圖，可以做地圖視覺化，說到這個我之前為了要畫地圖找了許多JavaScript套件，如D3.js …etc，真是非常痛苦而且要花很多時間學習．

說說缺點好了:

1. 由於對岸開源軟體，所以有些顯示是簡體字，無法改成其他語言．
2. 文件寫的不一定很清楚，而且現在是V1.0版本，不一定有更新到，要再去搜尋資料．
3. 地圖模式使用上容易遇到問題．

開始寫程式啦!

1. 1. 由於本文寫給有Python基礎且下載過Python的人，所以若尚未使用Python可以Google教學安裝，這邊不贅述，有需要再寫一篇．
   2. pyecharts可以用Jupyter Notebook or .py都可以撰寫
   3. 要畫圖總是要先有資料吧！這次資料源來自 2019台灣文化創意產業發展年報 ，不過我們先採手動輸入，後面文章會說明怎麼匯入Excel或JSON資料，主要來看看CD唱片、數位下載與共享方式的變化．
      

      2019台灣文化創意產業發展年報

   4. 我們將要呈現出直條圖
   5. 在CommandLine開啟Jupyter-notebook
      
      Jupyter-notebook

      1	Jupyter-notebook

   6. 安裝pyecharts套件
      
      pip install pyecharts

      1	pip install pyecharts

   7. 引入所需要的套件
      
      from pyecharts.charts import Bar #引入Bar from pyecharts import options as opts ＃引入控制元件 from pyecharts.globals import ThemeType #引入佈景樣式

      1 2 3

      from pyecharts.charts import Bar #引入Bar from pyecharts import options as opts ＃引入控制元件 from pyecharts.globals import ThemeType #引入佈景樣式

   8. 開始主要畫圖
      
      bar=( Bar(init_opts=opts.InitOpts(theme=ThemeType.WESTEROS,)) #初始化參數，透過theme可以選定不同圖形佈景 .add_xaxis([‘實體音樂CD唱片','數位音樂下載','數位音樂訂閱']) #處理X軸要呈現的資訊 .add_yaxis('2015',[654.07, 80.14, 840.57]) #處理Y軸呈現資訊，因為有2015~2018故有四個Y軸 .add_yaxis('2016',[630.91, 55.10, 1098.69]) #處理Y軸呈現資訊 .add_yaxis('2017',[417.24, 68.31 , 1148.17]) #處理Y軸呈現資訊 .add_yaxis('2018',[327.62, 56.41, 1302.94]) #處理Y軸呈現資訊 ） bar.render_notebook() #要在jupyernotebook呈現的話請加入此行

      1 2 3 4 5 6 7 8 9

      bar=(     Bar(init_opts=opts.InitOpts(theme=ThemeType.WESTEROS,)) #初始化參數，透過theme可以選定不同圖形佈景         .add_xaxis([‘實體音樂CD唱片','數位音樂下載','數位音樂訂閱']) #處理X軸要呈現的資訊         .add_yaxis('2015',[654.07, 80.14, 840.57]) #處理Y軸呈現資訊，因為有2015~2018故有四個Y軸         .add_yaxis('2016',[630.91, 55.10, 1098.69]) #處理Y軸呈現資訊         .add_yaxis('2017',[417.24, 68.31 , 1148.17]) #處理Y軸呈現資訊         .add_yaxis('2018',[327.62, 56.41, 1302.94]) #處理Y軸呈現資訊     ） bar.render_notebook() #要在jupyernotebook呈現的話請加入此行

   9. 傑克真是太神奇了，圖就畫好了
      

      如何畫一張直條圖

   10. 誒好像有點單調誒，使用者不知道這張圖在畫什麼？可以加入標題嗎？
       
       bar=( Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT,)) #初始化參數 .add_xaxis(['實體音樂CD唱片','數位音樂下載','數位音樂訂閱']) .add_yaxis('2015',[654.07, 80.14, 840.57]) .add_yaxis('2016',[630.91, 55.10, 1098.69]) .add_yaxis('2017',[417.24, 68.31 , 1148.17]) .add_yaxis('2018',[327.62, 56.41, 1302.94]) #.set_global_opts就是用來設定圖片全域的設定，我們透過tilte與subtilte加入標題與副標題，可以支援\n作為斷行 .set_global_opts(title_opts=opts.TitleOpts(title="台灣音樂市場\n銷售金額統計", subtitle="2015~2018", title_link='https://www.ignsw.com', pos_left=100), ) ) bar.render_notebook() #jupyernotebook專用

       1 2 3 4 5 6 7 8 9 10 11 12 13 14

       bar=(     Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT,)) #初始化參數         .add_xaxis(['實體音樂CD唱片','數位音樂下載','數位音樂訂閱'])         .add_yaxis('2015',[654.07, 80.14, 840.57])         .add_yaxis('2016',[630.91, 55.10, 1098.69])         .add_yaxis('2017',[417.24, 68.31 , 1148.17])         .add_yaxis('2018',[327.62, 56.41, 1302.94])         #.set_global_opts就是用來設定圖片全域的設定，我們透過tilte與subtilte加入標題與副標題，可以支援\n作為斷行         .set_global_opts(title_opts=opts.TitleOpts(title="台灣音樂市場\n銷售金額統計", subtitle="2015~2018", title_link='https://www.ignsw.com', pos_left=100),                         )              )      bar.render_notebook() #jupyernotebook專用

       
       
       

       如何畫一張直條圖-加入標題

   11.  看起來不會動對不對？但事實上在網頁上他是會動的喔，所以才說是互動式
       

       會動的直條圖

好的今天的介紹就到此，希望各位會喜歡，如果有什麼可以分享的畫圖軟體也歡迎留言！

按照往例寫在後頭：

身為一個IT與企業人，取之網路用之網路，也想為社會上盡一些力量，做點CSR(企業社會責任 Corporate Social Responsibility)，透過我小小的力量，藉此拋磚引玉，我整理了相關視覺化資料簡報(目前約一百多頁)與怎麼畫圖表的程式碼都已經寫成Step by Step的Jupyter Notebook教學文件，有些會陸續在Blog說明，但若各位賢達也想給予鼓勵做些公益，歡迎到任何慈善公益團體捐款(E.g 罕見疾病、脊髓損傷、唐寶寶、愛貓愛狗…etc，比較小型的公益團體)，讓愛心可以分散力量發揮出去，並且透過留言聯繫我，提供捐款證明，我將此份文件無償提供給您參考(文件會陸續更新，以當下最新版本提供)．