@antv/f2-canvas

1.0.5 • Public • Published

@antv/f2-canvas

微信小程序 F2 图表组件

安装

npm i @antv/f2-canvas

快速开始

下面我们就开始使用 f2-canvas 组件来绘制图表吧,这里假设用户已经初步了解微信小程序的基础框架,如不了解,请先阅读官网教程: 官方教程

以绘制柱状图为例:

  • STEP 1:在 pages 目录下新建 column 目录,该目录需要包含以下几个文件:

    • index.js
    • index.json
    • index.wxml
    • index.wxss

    各个文件的内容如下:

    • index.json 配置文件,引入 f2-canvas 组件,由于微信小程序组件名不允许包含数字,所以这里将其命名为 ff-canvas
    // index.json
    {
      "usingComponents": {
        "ff-canvas": "@antv/f2-canvas"
      }
    }
    • index.wxml 视图,使用 ff-canvas 组件,其中 opts 是一个我们在 index.js 中定义的对象,必设属性,它使得图表能够在页面加载后被初始化并设置,详见 index.js 中的使用。
    <!--index.wxml-->
    <view class="container">
      <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
    </view>
    • index.js 逻辑处理,这里还需要引入 F2 用于绘制图表,结构如下,注意路径正确。
    // index.js
    import F2 from '@antv/wx-f2'; // 注:也可以不引入, initChart 方法已经将 F2 传入,如果需要引入,注意需要安装 @antv/wx-f2 依赖
    
    let chart = null;
    
    function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表
      const data = [
        { year: '1951 年', sales: 38 },
        { year: '1952 年', sales: 52 },
        { year: '1956 年', sales: 61 },
        { year: '1957 年', sales: 145 },
        { year: '1958 年', sales: 48 },
        { year: '1959 年', sales: 38 },
        { year: '1960 年', sales: 38 },
        { year: '1962 年', sales: 38 },
      ];
      chart = new F2.Chart({
        el: canvas,
        width,
        height
      });
    
      chart.source(data, {
        sales: {
          tickCount: 5
        }
      });
      chart.tooltip({
        showItemMarker: false,
        onShow(ev) {
          const { items } = ev;
          items[0].name = null;
          items[0].name = items[0].title;
          items[0].value = '¥ ' + items[0].value;
        }
      });
      chart.interval().position('year*sales');
      chart.render();
      return chart;
    }
    
    Page({
      data: {
        opts: {
          onInit: initChart
        }
      },
    
      onReady() {
      }
    });

由于 f2-canvas 组件主要是对小程序的画布上下文和 html5 canvas 的上下文进行了适配以支持 F2 在小程序端的渲染,所以 F2 能绘制什么图表,小程序端就能绘制什么图表,使用时也只需按照 F2 的语法来写即可。

本项目只展示了部分 demos,更详细的请见 AntV F2

需要注意的是,在创建 chart 的时候,需要使用 'el' 属性来指定容器,对应 this.data.opts.onInit 方法形参中的 canvas 属性,另外该方法还会返回 width, height 属性分别对应画布的宽和高。

chart = new F2.Chart({
  el: canvas,
  width,
  height
});

不支持的功能

目前由于小程序不支持 document,所以 Guide.Html 辅助元素组件目前仍无法使用,其他 F2 的功能全部支持。

微信版本要求

  • 微信版本 >= 6.6.3
  • 基础库版本 >= 2.2.1
  • 开发者工具版本 >= 1.02.1808300

常见问题

问题 1

按照 demo 实例操作,但是报如下错误:

VM4466:1 TypeError: Cannot read property 'defaultView' of undefined
at Object.getStyle (f2.js? [sm]:1)
at Object.getWidth (f2.js? [sm]:1)
at t._initCanvas (f2.js? [sm]:1)
at new t (f2.js? [sm]:1)
at e._initCanvas (f2.js? [sm]:1)
at e._init (f2.js? [sm]:1)
at new e (f2.js? [sm]:1)
at Object.initChart [as onInit] (test.js? [sm]:18)
at t. (f2-canvas.js? [sm]:94)
at WAService.js:12

解决 检查是否有在 .wxss 文件中为 ff-canvas 组件定义 width 和 height 样式属性,如没有,加上即可,如此代码所示:https://github.com/antvis/wx-f2/blob/master/app.wxss#L16

如何贡献

如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

License

MIT license

Readme

Keywords

none

Package Sidebar

Install

npm i @antv/f2-canvas

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

19.2 kB

Total Files

14

Last publish

Collaborators

  • banxuan
  • xuying1027
  • lvisei
  • yisi.wang
  • basketduck
  • biupiubiupiu
  • flash1
  • dreammy23
  • laixingui.lxg
  • zhangjunjie-loki
  • rainy25ghz
  • zeyuwang
  • yanxiong
  • susiwen8
  • freestyle21
  • soundquiet
  • elaine.q.10
  • sturuby
  • sakuya223
  • serializedowen
  • xdzhao
  • yangzhanmei
  • wjgogogo
  • leungwensen
  • dori
  • iaaron
  • yard
  • simaq
  • dxq613
  • intchous
  • susan_ann
  • jinke.li
  • lzxue
  • army8735
  • atool
  • baizn
  • dengfuping
  • neoddish
  • jeffy2012
  • zqlu
  • afc163
  • pomelo-nwu
  • kopiluwaky
  • ccnuzindex
  • panyuqi
  • bubkoo
  • zengyue
  • kasmine
  • boyu.zlj
  • l1ud0ngq1
  • newbyvector
  • winniexing
  • chenluli
  • kn9117
  • xdddst
  • semious2020
  • esora
  • nadia_liu
  • bbsqq
  • mxz96102
  • openwayne
  • pearmini
  • pddpd
  • yiqianyao
  • zhanba
  • cxxxxxn