# f2-canvas

**Repository Path**: dindonyun_service/f2-canvas

## Basic Information

- **Project Name**: f2-canvas
- **Description**: 微信小程序 F2 自定义图表组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @antv/f2-canvas

微信小程序 F2 图表组件

## 安装

```bash
npm i @antv/f2-canvas
```

## 快速开始

下面我们就开始使用 `f2-canvas` 组件来绘制图表吧，这里假设用户已经初步了解微信小程序的基础框架，如不了解，请先阅读官网教程： [官方教程](https://developers.weixin.qq.com/miniprogram/dev/index.html)。

以绘制柱状图为例：

<img src="https://gw.alipayobjects.com/zos/rmsportal/aDmzXXwkPmUFLCXwXBvo.gif" width="332">

* STEP 1：在 pages 目录下新建 column 目录，该目录需要包含以下几个文件：
  + index.js
  + index.json
  + index.wxml
  + index.wxss

  各个文件的内容如下：

  + `index.json` 配置文件，引入 f2-canvas 组件，由于微信小程序组件名不允许包含数字，所以这里将其命名为 ff-canvas

  ```js
  // index.json
  {
    "usingComponents": {
      "ff-canvas": "@antv/f2-canvas"
    }
  }
  ```

  + `index.wxml` 视图，使用 ff-canvas 组件，其中 `opts` 是一个我们在 index.js 中定义的对象，**必设属性**，它使得图表能够在页面加载后被初始化并设置，详见 index.js 中的使用。

  ```html
  <!--index.wxml-->
  <view class="container">
    <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
  </view>
  ```

  + `index.js` 逻辑处理，这里还需要引入 F2 用于绘制图表，结构如下，注意路径正确。

  ```js
  // 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](https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html)。

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

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


## 不支持的功能

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


## 微信版本要求

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

## 常见问题

### 问题 1
按照 demo 实例操作，但是报如下错误：

```js
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](https://github.com/antvis/f2-canvas/issues) 看看有没有类似的 bug 或者建议。

## License

[MIT license](https://github.com/antvis/f2-canvas/blob/master/LICENSE)