亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

Node.js定時(shí)導(dǎo)出Highchart圖表

miguel.jiang / 814人閱讀

摘要：一背景需求因?yàn)閿?shù)據(jù)包含機(jī)密信息，所以得自己搭建圖表導(dǎo)出服務(wù)器在后臺(tái)生成對(duì)應(yīng)圖表以圖片的形式導(dǎo)出保存。圖表個(gè)性化程度較高，如一些圖列是沒(méi)有的，但在前端可以利用實(shí)現(xiàn)。每周定時(shí)執(zhí)行上述生成圖表的任務(wù)，保存到指定位置。

一、背景需求

1、因?yàn)閿?shù)據(jù)包含機(jī)密信息，所以得自己搭建圖表導(dǎo)出服務(wù)器；在后臺(tái)生成對(duì)應(yīng)Highcharts圖表、以圖片的形式導(dǎo)出保存。
2、圖表個(gè)性化程度較高，如一些圖列是Highchart沒(méi)有的，但在前端可以利用css實(shí)現(xiàn)。
3、每周定時(shí)執(zhí)行上述生成圖表的任務(wù)，保存到指定位置。
4、需求已經(jīng)上線(xiàn)一個(gè)月，生產(chǎn)上運(yùn)行良好，時(shí)間有限，只能在這簡(jiǎn)單記錄下，理一下思路也方便以后查閱。

二、實(shí)現(xiàn)思路

1、經(jīng)過(guò)一番了解，發(fā)現(xiàn)Puppeteer，PhantomJs等可以實(shí)現(xiàn)上述Highchart圖表以圖片形式導(dǎo)出的功能，它們也常常用于：

爬蟲(chóng)

生成網(wǎng)頁(yè)截圖/PDF

測(cè)試等

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

官方的文檔也較為詳細(xì)，相關(guān)API，另外其他項(xiàng)目用它實(shí)現(xiàn)PDF生成的實(shí)踐，遷移到本項(xiàng)目爬的坑也會(huì)少點(diǎn)。

截出來(lái)的圖片質(zhì)量清晰，也滿(mǎn)足業(yè)務(wù)的要求。

3、定時(shí)任務(wù)的需求則用了Cron實(shí)現(xiàn)；在設(shè)定的時(shí)間點(diǎn)，在后臺(tái)用Puppeteer打開(kāi)我們網(wǎng)頁(yè)，實(shí)現(xiàn)特定區(qū)域截圖。

三、Puppeteer使用

1、 安裝，安裝puppeteer同時(shí)，也會(huì)下載Chromium，安裝地址為外國(guó)網(wǎng)站，下載失敗的話(huà)多嘗試幾次、切換到cnpm或者手動(dòng)下載。如果是部署再Linux上的話(huà)，還得安裝依賴(lài)包才能啟動(dòng)Chromium，具體操作可以查看下面。

# 安裝
npm i puppeteer --save

2、任意區(qū)域截圖

第一張圖為圖表的HTML頁(yè)面，第二張圖是指定區(qū)域的截圖，代碼如下：

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

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

async function screenshot() {
    try {
        // 添加啟動(dòng)參數(shù)"--no-sandbox", "--disable-setuid-sandbox" 
        // 解決Linux環(huán)境下"no use sandbox"報(bào)錯(cuò)
        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(() => {
            // 獲取指定容器的坐標(biāo)信息
            let { x, y, width, height } = document.getElementById("container").getBoundingClientRect();
            return { x, y, width, height };
        });
    
        await  page.screenshot({
            path:"chart.png",
            clip:clip //設(shè)置clip 屬性
        });
      
        await page.close();
        await browser.close();
 
    } catch (error) {
        throw error;
    }
}

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

app.listen(3008);
四、定時(shí)任務(wù) 
const CronJob = require("cron").CronJob;

// 每天9點(diǎn)鐘執(zhí)行定時(shí)任務(wù)，其他時(shí)間可查找corn表達(dá)是或者使用corn表達(dá)式生成工具
new CronJob({
    cronTime: "0 0 9 * * *",
    onTick: function () {
        screenshot();
    },
    start: true
});
五、Linux上部署問(wèn)題

至此，我們實(shí)現(xiàn)了導(dǎo)出Highcharts圖表的功能，但是這只是在windows系統(tǒng)的開(kāi)發(fā)機(jī)上把這個(gè)流程跑通，部署到linux機(jī)器上是仍需解決以下幾點(diǎn)問(wèn)題

Chromium依賴(lài)包安裝：官網(wǎng)列出了Debian和Centos依賴(lài)包列表，點(diǎn)擊查看，按照上述列表按住即可

中文亂碼問(wèn)題：linux默認(rèn)沒(méi)有中文字體，所以我們頁(yè)面上的中文全是亂碼，以Debian系統(tǒng)為例安裝字體

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104579.html

相關(guān)文章

  • 基于canvas實(shí)現(xiàn)的高性能、跨平臺(tái)的股票圖表庫(kù)--clchart

    摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開(kāi)源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫(kù)有和等項(xiàng)目，這些圖表庫(kù)對(duì)股票繪圖已經(jīng)做了一些非常專(zhuān)業(yè)的處理及優(yōu)化了，但是他們均基于來(lái)繪圖。 什么是 ClChart？ ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開(kāi)源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)...

    baihe 評(píng)論0 收藏0

  • 基于canvas實(shí)現(xiàn)的高性能、跨平臺(tái)的股票圖表庫(kù)--clchart

    摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開(kāi)源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫(kù)有和等項(xiàng)目，這些圖表庫(kù)對(duì)股票繪圖已經(jīng)做了一些非常專(zhuān)業(yè)的處理及優(yōu)化了，但是他們均基于來(lái)繪圖。 什么是 ClChart？ ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開(kāi)源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)...

    SnaiLiu 評(píng)論0 收藏0

  • 基于canvas實(shí)現(xiàn)的高性能、跨平臺(tái)的股票圖表庫(kù)--clchart

    摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開(kāi)源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫(kù)有和等項(xiàng)目，這些圖表庫(kù)對(duì)股票繪圖已經(jīng)做了一些非常專(zhuān)業(yè)的處理及優(yōu)化了，但是他們均基于來(lái)繪圖。 什么是 ClChart？ ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開(kāi)源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)...

    PAMPANG 評(píng)論0 收藏0

  • 前端小案例

    摘要：謹(jǐn)以此文我在北京一家公司打工兩個(gè)月，昨夜露宿街頭我是一名程序員，在北京打工兩個(gè)月，如今身上只剩吃碗面條的錢(qián)。昨夜在北京寒冷的公園和同事與流浪漢一起露宿一夜，因?yàn)槲覀儽焕习逋锨妨斯べY。我在兩個(gè)多月前，前往北京。 你可能不知道的 14 個(gè) JavaScript 調(diào)試技巧 了解你的工具可以在完成任務(wù)的過(guò)程中發(fā)揮重大作用。盡管傳言 JavaScript 難以調(diào)試，但是如果你掌握了一些調(diào)試技巧，...

    codeGoogle 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<