背景：生成數(shù)據(jù)分析報(bào)告時(shí)，需要后期自動生成統(tǒng)計(jì)圖，插入報(bào)告中。但其他幾個(gè)可視化工具沒有合適的圖表，查詢相關(guān)資料后，發(fā)現(xiàn)一個(gè)網(wǎng)頁可以生成所需圖表。
目標(biāo)：內(nèi)網(wǎng)環(huán)境，將生成的html轉(zhuǎn)化成圖片，并自動插入報(bào)告中。

1、所需圖表

報(bào)告中需要插入一個(gè)類金字塔形的柱狀圖，如下所示：

所需圖片

找了一下echarts，seaborn中都沒有需要的樣式，就很煩。
無意中發(fā)現(xiàn)，AntV G2中的這個(gè)圖貌似可以使用的樣子，它長這樣：

AntV G2

2、內(nèi)網(wǎng)環(huán)境打開html

由于本次是在內(nèi)網(wǎng)環(huán)境運(yùn)行的，所有先復(fù)制html文件在內(nèi)網(wǎng)打開，結(jié)果是空白網(wǎng)頁。這是由于網(wǎng)頁內(nèi)部JS未能成功渲染。
打開html文件，找到j(luò)s訪問請求地址，如下所示：

 <div id="container" />
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.11/dist/g2.min.js"></script>
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.2/dist/data-set.min.js"></script>
 <script>

然后復(fù)制地址，下載這兩個(gè)js文件，將文件與此html放入同一路徑下，將上述代碼修改為

<script src="./g2.min.js"></script>
<script src="./data-set.min.js"></script>

然后在內(nèi)網(wǎng)本地打開，就可以正常顯示了。

3、修改插入數(shù)據(jù)

插入數(shù)據(jù)就很簡單了，直接按照統(tǒng)計(jì)邏輯獲取數(shù)據(jù)組，根據(jù)html上本身的要求轉(zhuǎn)化成json或者數(shù)組。

數(shù)據(jù)樣式

要主要的是其中顏色的替換和數(shù)據(jù)顯示的形式。

4、html轉(zhuǎn)化成pdf

安裝使用webdriver，輸入本地html路徑，PDF輸出路徑，就可以將網(wǎng)頁轉(zhuǎn)化成圖片了。

import webdriver

def Html_to_png (url , save_fn ):
    '''
    將html文件轉(zhuǎn)化為png
    '''
    option = webdriver.ChromeOptions()
    option.add_argument('--headless')
    option.add_argument('--disable-gpu')
    option.add_argument("--window-size=1920,1080")
    option.add_argument("--hide-scrollbars")
     
    driver = webdriver.Chrome(chrome_options=option)
     
    driver.get(url)
    print(driver.title)

最終成圖效果