基于 Node.js 的服务端渲染图表

分类:Node.js     发布时间:2024-09-22     最后更新:2024-09-22     浏览数:297
最近在 QQ 群里看到一个问题: 这个问题我之前也想过,但是实际的项目没有用到就搁置了。趁今天有时间,就好好研究一下。

最近在 QQ 群里看到一个问题:

这个问题我之前也想过,但是实际的项目没有用到就搁置了。趁今天有时间,就好好研究一下。

选型

Node.js 如何实现画布?

Node.js 有 npm 包 node-canvas

Node.js 如何实现图表?

  • F2,建议用 v3 版本,因为 v4 之后用 jsx 描述图表,需要配置 babel 转译一下 jsx,有点麻烦。
  • G2

实现

图表的实现,我选用的是 F2

按照文档一步一步实现。

我遇到的问题是: 1、渲染出的 jpg 图片背景色是黑色的,而我需要的是白色背景。

阅读 F2 的 API 文档,发现可以通过添加一个组来实现,然后把组的 zIndex 设为 -1,然后在组添加一个和画布一样大小的白色的矩形充当白色背景。

我把它抽取成一个方法,如下:

// chart 是一个图表实例
const addBg = (chart) => {
  const canvas = chart.get("canvas");
  const bgGroup = canvas.addGroup({
    zIndex: -1,
  });
  const bg = new F2.G.Shape.Rect({
    attrs: {
      x: 0,
      y: 0,
      height: canvas.getWidth(),
      width: canvas.getHeight(),
      lineWidth: 0,
      fill: "#fff",
      strokeStyle: "#000",
      radius: 0,
    },
  });
  bgGroup.add(bg);
};

调用代码:

// 省略了一些代码,可以参考官方示例
const chart = new F2.Chart({
  context: canvas.getContext("2d"),
  width,
  height,
  animate: false,
  pixelRatio,
});

addBg(chart);

最终效果:

上一篇: 我知道的之 encodeURI 下一篇: 虚惊一场的 Electron 闪退