花幾天時間肝了一個線上製作詞雲圖網站

阿新 • • 發佈：2021-08-07

大家好，我是辰哥~

背景：看過辰哥往前文章的都知道，在視覺化方面經常繪製詞雲圖、折線圖、柱狀圖等。所以為了方便繪製這些圖表，辰哥就把這些視覺化圖的繪製做成可操作的過程。

最近辰哥也是在利用空閒時間做了一個線上製作詞雲網站（後面會慢慢補上其他的圖表），廢話不多說，先看一下演示視訊

該網站已部署到公網，並且加上了ssl證書（防止瀏覽器報不安全，哈哈哈）

網址：https://show.chenlove.cn/

01 功能介紹

目前該網站只提供繪製詞雲圖，後面會提供其他圖的繪製，不過其操作差不多，都是匯入資料，選擇欄位，最後點選生成圖。

<div class="form-group optionss" style="position:absolute;">
            <!-- <input type="text" class="form-control form-control-xxx" value=""> -->
            <!-- <button class="btn btn-sm btn-danger">-</button> -->
            <select class="form-control form-select1" id="excelselect" onchange="getSelectValue();"/>
            </select>
            <select class="form-control form-select1" id="colorselect" onchange="colorSelectValue();"/>
                <option  value="">背景顏色</option>
                <option  value="1">白色</option>
                <option  value="2">黑色</option>
            </select> 
            <button class="btn btn-sm btn-success"  onclick="buttonstartdraw()">生成詞雲圖</button>
            <button class="btn btn-sm btn-success"  onclick="downloadImg()">匯出</button>
    </div>

訪問網站，可以看到樣例圖，點選上傳資料的Excel資料，這裡支援各種excel資料的字尾檔案（辰哥這裡測試了xls、xlsx、csv這三種常用的字尾都沒問題）

f = request.files['file']
        basepath = os.path.dirname(__file__)  # 當前檔案所在路徑
        print(f.filename)
        #######################################
        # 毫秒級時間戳
        file_name = str(round(time.time() * 1000))
        dir = str(time.strftime('%y%m%d', time.localtime()))
        upload_path = os.path.join(basepath, 'uploads/'+dir)
        # 判斷資料夾是否存在
        if not os.path.exists(upload_path):
            os.mkdir(upload_path)
        #######################################
        file_path = str(file_name)+str(f.filename)
        f.save(upload_path+"/"+file_path)

可以預覽自己的excel資料，右上角提供搜尋excel表功能，翻頁等等。這些都是通過開源外掛bootstarp-table去實現。

可以選擇excel中的任意一個欄位去繪製詞雲圖，以及選擇詞雲圖的背景顏色。然後點選生成詞雲圖

<style>
    #img {
        text-align:center; 
        width:100%;
         margin-top: 60px;
    }
    img{
        width: 300px;
        overflow: hidden;
        margin: 0 auto;
        
    }
    #img img{
        width: 40%;
        transition:all 2s;/*圖片放大過程的時間*/
        position: relative;
    }
    img:hover{
        cursor: crosshair;
        transform: scale(2.0);  /*以y軸為中心旋轉*/
    }
</style>

生成的詞雲圖可以支援放大預覽：滑鼠放上去，自動放大。

function downloadImg(){
            var img = document.getElementById('cyimg'); // 獲取要下載的圖片
            var url = img.src;                            // 獲取圖片地址
            var a = document.createElement('a');          // 建立一個a節點插入的document
            var event = new MouseEvent('click')           // 模擬滑鼠click點選事件
            a.download = 'beautifulGirl'                  // 設定a節點的download屬性值
            a.href = url;                                 // 將圖片的src賦值給a節點的href
            a.dispatchEvent(event)                        // 觸發滑鼠點選事件
         }

最後點選匯出，可以將生成的詞雲圖匯出到本地。