Node.js定时导出Highchart图表

miguel.jiang 发布于2019-08-23 18:03 / 590人阅读

摘要：一背景需求因为数据包含机密信息，所以得自己搭建图表导出服务器在后台生成对应图表以图片的形式导出保存。图表个性化程度较高，如一些图列是没有的，但在前端可以利用实现。每周定时执行上述生成图表的任务，保存到指定位置。

一、背景需求

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字体戳这

云服务器服务器托管 Highchart node js Node.js node.js 腾讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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