# @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)
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序 F2 自定义图表组件.zip
共20个文件
js:11个
json:2个
wxss:1个
需积分: 1 0 下载量 26 浏览量
2024-01-05
22:08:33
上传
评论
收藏 19KB ZIP 举报
温馨提示
微信小程序的优势在于它方便快捷、轻量级、跨平台、丰富的推广方式、丰富的功能接口、数据分析与优化、结合微信支付、支持多场景应用、社交功能以及多端同步等。这些优点使得小程序能够满足用户的多种需求,提供更好的用户体验
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序 F2 自定义图表组件.zip (20个子文件)
open_weixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcxxxxxxxxxxxxcxvcvcv
gulpfile.js 826B
tools
utils.js 4KB
checkcomponents.js 2KB
build.js 9KB
config.js 2KB
test
helper.js 4KB
.eslintrc.js 2KB
src
index.wxml 193B
index.js 2KB
index.json 48B
index.wxss 67B
LICENSE 1KB
.babelrc 202B
package.json 2KB
.npmignore 147B
test
utils.js 6KB
index.test.js 425B
wx.test.js 376B
.gitignore 148B
README.md 4KB
共 20 条
- 1
资源评论
极致人生-010
- 粉丝: 3237
- 资源: 3077
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功