Node.js定時導出Highchart圖表

miguel.jiang 發布于2019-08-23 18:03 / 715人閱讀

摘要：一背景需求因為數據包含機密信息，所以得自己搭建圖表導出服務器在后臺生成對應圖表以圖片的形式導出保存。圖表個性化程度較高，如一些圖列是沒有的，但在前端可以利用實現。每周定時執行上述生成圖表的任務，保存到指定位置。

一、背景需求

1、因為數據包含機密信息，所以得自己搭建圖表導出服務器；在后臺生成對應Highcharts圖表、以圖片的形式導出保存。
2、圖表個性化程度較高，如一些圖列是Highchart沒有的，但在前端可以利用css實現。
3、每周定時執行上述生成圖表的任務，保存到指定位置。
4、需求已經上線一個月，生產上運行良好，時間有限，只能在這簡單記錄下，理一下思路也方便以后查閱。

二、實現思路

1、經過一番了解，發現Puppeteer，PhantomJs等可以實現上述Highchart圖表以圖片形式導出的功能，它們也常常用于：

爬蟲

生成網頁截圖/PDF

測試等

2、這個需求選用了Puppeteer去完成，原因如下：

官方的文檔也較為詳細，相關API，另外其他項目用它實現PDF生成的實踐，遷移到本項目爬的坑也會少點。

截出來的圖片質量清晰，也滿足業務的要求。

3、定時任務的需求則用了Cron實現；在設定的時間點，在后臺用Puppeteer打開我們網頁，實現特定區域截圖。

三、Puppeteer使用

1、安裝，安裝puppeteer同時，也會下載Chromium，安裝地址為外國網站，下載失敗的話多嘗試幾次、切換到cnpm或者手動下載。如果是部署再Linux上的話，還得安裝依賴包才能啟動Chromium，具體操作可以查看下面。

# 安裝
npm i puppeteer --save

2、任意區域截圖

第一張圖為圖表的HTML頁面，第二張圖是指定區域的截圖，代碼如下：

const express = require("express");
const puppeteer = require("puppeteer");
const app = express();

app.use(express.static("public"));

async function screenshot() {
    try {
        // 添加啟動參數"--no-sandbox", "--disable-setuid-sandbox" 
        // 解決Linux環境下"no use sandbox"報錯
        const browser = await puppeteer.launch({ 
            args: ["--no-sandbox", "--disable-setuid-sandbox"],
            headless: true 
        });
    
        const page = await browser.newPage();
        ? ? 
        await page.goto("http://localhost:3008/");
        
        let clip = await page.evaluate(() => {
            // 獲取指定容器的坐標信息
            let { x, y, width, height } = document.getElementById("container").getBoundingClientRect();
            return { x, y, width, height };
        });
    
        await  page.screenshot({
            path:"chart.png",
            clip:clip //設置clip 屬性
        });
      
        await page.close();
        await browser.close();
 
    } catch (error) {
        throw error;
    }
}

// 訪問http://localhost:3008/screenshot進行截圖
app.get("/screenshot", (req, res) => {
    screenshot()
        .then(data => res.json("clip successed"))
        .catch(err => res.json("clip failed"));
    
});

app.listen(3008);

四、定時任務

const CronJob = require("cron").CronJob;

// 每天9點鐘執行定時任務，其他時間可查找corn表達是或者使用corn表達式生成工具
new CronJob({
    cronTime: "0 0 9 * * *",
    onTick: function () {
        screenshot();
    },
    start: true
});

五、Linux上部署問題

至此，我們實現了導出Highcharts圖表的功能，但是這只是在windows系統的開發機上把這個流程跑通，部署到linux機器上是仍需解決以下幾點問題

Chromium依賴包安裝：官網列出了Debian和Centos依賴包列表，點擊查看，按照上述列表按住即可

中文亂碼問題：linux默認沒有中文字體，所以我們頁面上的中文全是亂碼，以Debian系統為例安裝字體

# 安裝文泉驛字體
apt-get update
apt-get install -y wqy*

其他字體安裝：由于項目對圖表文字顯示要求苛刻，要求中文以楷體顯示，英文以new times roman顯示，所以還得從windows上把字體拷貝過去，詳細Debian安裝windows字體戳這

GPU云服務器云服務器 Highchart node js Node.js node.js 騰訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104579.html

基于canvas實現的高性能、跨平臺的股票圖表庫--clchart

摘要：什么是是一個基于創建的簡單高性能和跨平臺的股票數據可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經做了一些非常專業的處理及優化了，但是他們均基于來繪圖。什么是 ClChart？ ClChart是一個基于canvas創建的簡單、高性能和跨平臺的股票數據可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...

baihe 2019-08-22 16:43 評論0 收藏0
基于canvas實現的高性能、跨平臺的股票圖表庫--clchart

摘要：什么是是一個基于創建的簡單高性能和跨平臺的股票數據可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經做了一些非常專業的處理及優化了，但是他們均基于來繪圖。什么是 ClChart？ ClChart是一個基于canvas創建的簡單、高性能和跨平臺的股票數據可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...

SnaiLiu 2019-08-29 15:09 評論0 收藏0
基于canvas實現的高性能、跨平臺的股票圖表庫--clchart

摘要：什么是是一個基于創建的簡單高性能和跨平臺的股票數據可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經做了一些非常專業的處理及優化了，但是他們均基于來繪圖。什么是 ClChart？ ClChart是一個基于canvas創建的簡單、高性能和跨平臺的股票數據可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...

PAMPANG 2019-08-02 10:16 評論0 收藏0
前端小案例

摘要：謹以此文我在北京一家公司打工兩個月，昨夜露宿街頭我是一名程序員，在北京打工兩個月，如今身上只剩吃碗面條的錢。昨夜在北京寒冷的公園和同事與流浪漢一起露宿一夜，因為我們被老板拖欠了工資。我在兩個多月前，前往北京。你可能不知道的 14 個 JavaScript 調試技巧了解你的工具可以在完成任務的過程中發揮重大作用。盡管傳言 JavaScript 難以調試，但是如果你掌握了一些調試技巧，...

codeGoogle 2019-08-22 11:21 評論0 收藏0