2021SC@SDUSC“F2移动端可视化方案”源码分析（九）——小程序与Node端上的F2渲染

2021SC@SDUSC

目录

简介

Node端渲染F2

使用说明

步骤

 高清适配

小程序上渲染F2

封装思路

支付宝小程序

微信小程序

---

简介

本文主要用来分析F2在两个常用端上的渲染使用。

F2 是基于 CanvasRenderingContext2D 的标准接口绘制的，所以只要能提供标准 CanvasRenderingContext2D 接口的实现对象，F2就能进行图表绘制.

Node端渲染F2

使用说明

将F2运行于 Node 的后台服务上面，可以提供相当强大的服务端渲染可视化图表的能力，可以用于生成离线报表、图文 pdf 等场景。

步骤

1.安装 node-canvas

该模块提供了在 node 中实现 canvas 渲染的能力，结合该模块，就可以实现 F2 在 node 端的图表渲染了

npm install canvas

2.引入F2

const F2 = require('@antv/f2');

3.创建一个 canvas 对象

const Canvas = require('canvas');
const canvas = Canvas.createCanvas(400,267);

4.使用 F2 绘制图表，需要注意的是，在创建 Chart 对象时传入的属性，下面的两种方式 width 和 height 属性都是必须设置的，在这里需要说明的是，动画模块，F2 会默认引入，所以在 node 端需要把动画给关掉，不然会出现渲染不完整的情况。

// 传入上下文环境
const chart = new F2.Chart({
    context: canvas.getContext('2d'), // 将第三步创建的 canvas 对象的上下文传入
    width: 400, // 必选，图表高度，跟 canvas 的宽度相同
    height: 267, // 必选，图表高度，跟 canvas 的高度相同
    animate: false // 关闭动画
});

 下面给出一个 F2 在 Node 端绘制饼图的一个完整代码：

const fs = require('fs');
const path = require('path');
const Canvas = require('canvas'); // 引入 node canvas
const F2 = require('@antv/f2');

const canvas = Canvas.createCanvas(375, 260); // 创建 canvas 对象

// 使用 F2 绘制饼图
const data = [
  { name: '芳华', percent: 0.4, a: '1' },
  { name: '妖猫传', percent: 0.2, a: '1' },
  { name: '机器之血', percent: 0.18, a: '1' },
  { name: '心理罪', percent: 0.15, a: '1' },
  { name: '寻梦环游记', percent: 0.05, a: '1' },
  { name: '其他', percent: 0.02, a: '1' }
];
const chart = new F2.Chart({
  context: canvas.getContext('2d'),
  width: 375,
  height: 260,
  animate: false,
  padding: [ 45, 'auto', 'auto' ]
});
chart.source(data, {
  percent: {
    formatter(val) {
      return val * 100 + '%';
    }
  }
});
chart.legend({
  position: 'right'
});
chart.coord('polar', {
  transposed: true,
  radius: 0.85
});
chart.axis(false);
chart.interval()
  .position('a*percent')
  .color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0' ])
  .adjust('stack')
  .style({
    lineWidth: 1,
    stroke: '#fff',
    lineJoin: 'round',
    lineCap: 'round'
  });

chart.render();

canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'pie.png'))) // 导出图片

效果图：

 高清适配

这个地方是比较简单的，假设我们当前的设备的像素比为 n ，只需要把宽和高都放大 n 倍即可：

const canvas = Canvas.createCanvas(375 * n, 260 * n); // create a canvas object
const chart = new F2.Chart({
    el: canvas,
    width: 375 * n,
    height: 260 * n,
    padding: [ 45, 'auto','auto'],
});

小程序上渲染F2

封装思路

因为在小程序中所给的 context 对象不是标准的 CanvasRenderingContext2D ，所以封装的核心思路是将 CanvasRenderingContext2D 对齐，所以 F2 针对支付宝和微信这两个常见的场景做了一层  context 的对齐，其他的小程序也可以按同样的思路封装。

支付宝小程序

说明

为了方便用户使用，F2 封装了小程序的自定义组件，所以需要支付宝小程序基础库支持自定义组件：小程序基础库版本要在 1.7.0 或以上。

使用

1.安装依赖

项目默认初始化后是没有 package.json 的，需要新增 package.json 后再安装

npm install @antv/my-f2 --save

2.使用自定义组件

1）打开json文件，引入组件

{
    "usingComponents": {
        "f2": "@antv/my-f2"
    }
}

2）axml使用组件

<view class = "f2-chart">
    <f2 onInit = "onInitChart"></f2>
</view>

3）acss设置宽高

.f2-chart {
    width: 100%;
    height: 500rpx;
}

4）实例化图表格

Page({
  data: {},
  onInitChart(F2, config) {
    const chart = new F2.Chart(config);
    const data = [
      { value: 63.4, city: 'New York', date: '2011-10-01' },
      { value: 62.7, city: 'Alaska', date: '2011-10-01' },
      { value: 72.2, city: 'Austin', date: '2011-10-01' },
      { value: 58, city: 'New York', date: '2011-10-02' },
      { value: 59.9, city: 'Alaska', date: '2011-10-02' },
      { value: 67.7, city: 'Austin', date: '2011-10-02' },
      { value: 53.3, city: 'New York', date: '2011-10-03' },
      { value: 59.1, city: 'Alaska', date: '2011-10-03' },
      { value: 69.4, city: 'Austin', date: '2011-10-03' },
    ];
    chart.source(data, {
      date: {
        range: [0, 1],
        type: 'timeCat',
        mask: 'MM-DD'
      },
      value: {
        max: 300,
        tickCount: 4
      }
    });
    chart.area().position('date*value').color('city').adjust('stack');
    chart.line().position('date*value').color('city').adjust('stack');
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  }
});

微信小程序

微信小程序的 F2 渲染方式与支付宝相似，在此不做进一步分析。