logo

F2

  • Manual
  • Component Documentation
  • Examples
  • Productsantv logo arrow
  • 5.10.0
  • Quick Start
  • Core Concepts
  • Chart Grammar
  • Data Processing
  • Scale
  • Coordinate System
  • Framework
    • 小程序上渲染 F2
  • Advanced
  • Question

小程序上渲染 F2

Previous
Coordinate System

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library
WeaveFox-AI Coding Assistant

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference
weavefoxWeaveFox-AI Developer Community

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
weavefoxWeaveFox-AI Coding Assistant
© Copyright 2026 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

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

封装思路

在小程序中提供的 context 对象不是标准的 CanvasRenderingContext2D,所以封装的核心思路是将 context 和 CanvasRenderingContext2D 对齐。F2 针对支付宝和微信这两个常见场景做了一层 context 的对齐,详见:https://github.com/antvis/f2-context。其他小程序也可以按同样的思路封装。

小程序组件

为了方便使用,我们针对支付宝和微信分别封装了对应的自定义组件。

支付宝小程序

F2 的支付宝小程序版本。

  • GitHub: my-f2
  • 使用文档

微信小程序

F2 的微信小程序图表组件。

  • GitHub: wx-f2
  • 使用文档

注意:详细使用说明请参考 小程序集成教程。