1 | # my-f2
|
2 |
|
3 | [![](https://img.shields.io/travis/antvis/my-f2.svg)](https://travis-ci.org/antvis/my-f2)
|
4 | ![](https://img.shields.io/badge/language-javascript-red.svg)
|
5 | ![](https://img.shields.io/badge/license-MIT-000000.svg)
|
6 |
|
7 | [![npm package](https://img.shields.io/npm/v/@antv/my-f2.svg)](https://www.npmjs.com/package/@antv/my-f2)
|
8 | [![NPM downloads](http://img.shields.io/npm/dm/@antv/my-f2.svg)](https://npmjs.org/package/@antv/my-f2)
|
9 | [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/my-f2.svg)](http://isitmaintained.com/project/antvis/my-f2 "Percentage of issues still open")
|
10 |
|
11 | F2 for alipay mini-program.
|
12 |
|
13 | 说明:目前由于小程序不支持 document,所以 Guide.Html 辅助元素组件目前仍无法使用,其他 F2 的功能全部支持。
|
14 |
|
15 | ## 下载
|
16 |
|
17 | `npm install @antv/my-f2`
|
18 |
|
19 | ## 示例
|
20 |
|
21 | Demos: https://github.com/antvis/mini-program-f2-demos/tree/master/my-charts ,可以使用支付宝开发工具直接打开体验。
|
22 |
|
23 | ## 使用
|
24 |
|
25 | ```css
|
26 | <!-- page.acss -->
|
27 | canvas {
|
28 | width: 100%;
|
29 | height: 100%;
|
30 | }
|
31 | ```
|
32 |
|
33 | ```html
|
34 | <view class="container">
|
35 | <canvas
|
36 | id="area"
|
37 | onTouchStart="touchStart"
|
38 | onTouchMove="touchMove"
|
39 | onTouchEnd="touchEnd"
|
40 | width="{{width}}" height="{{height}}"
|
41 | />
|
42 | </view>
|
43 | ```
|
44 |
|
45 | ```js
|
46 | import F2 from '@antv/my-f2';
|
47 | const app = getApp();
|
48 |
|
49 | let chart = null;
|
50 |
|
51 | function drawChart(canvas, width, height) {
|
52 | const data = [
|
53 | { value: 63.4, city: 'New York', date: '2011-10-01' },
|
54 | { value: 62.7, city: 'Alaska', date: '2011-10-01' },
|
55 | { value: 72.2, city: 'Austin', date: '2011-10-01' },
|
56 | { value: 58, city: 'New York', date: '2011-10-02' },
|
57 | { value: 59.9, city: 'Alaska', date: '2011-10-02' },
|
58 | { value: 67.7, city: 'Austin', date: '2011-10-02' },
|
59 | { value: 53.3, city: 'New York', date: '2011-10-03' },
|
60 | { value: 59.1, city: 'Alaska', date: '2011-10-03' },
|
61 | { value: 69.4, city: 'Austin', date: '2011-10-03' },
|
62 | // ...
|
63 | ];
|
64 | chart = new F2.Chart({
|
65 | el: canvas,
|
66 | width,
|
67 | height
|
68 | });
|
69 |
|
70 | chart.source(data, {
|
71 | date: {
|
72 | range: [ 0, 1 ],
|
73 | type: 'timeCat',
|
74 | mask: 'MM-DD'
|
75 | },
|
76 | value: {
|
77 | max: 300,
|
78 | tickCount: 4
|
79 | }
|
80 | });
|
81 | chart.axis('date', {
|
82 | label(text, index, total) {
|
83 | const textCfg = {};
|
84 | if (index === 0) {
|
85 | textCfg.textAlign = 'left';
|
86 | }
|
87 | if (index === total - 1) {
|
88 | textCfg.textAlign = 'right';
|
89 | }
|
90 | return textCfg;
|
91 | }
|
92 | });
|
93 | chart.area().position('date*value').color('city').adjust('stack');
|
94 | chart.line().position('date*value').color('city').adjust('stack');
|
95 | chart.render();
|
96 | return chart;
|
97 | }
|
98 |
|
99 | Page({
|
100 | data: {},
|
101 | onReady() {
|
102 | my.createSelectorQuery()
|
103 | .select('#area')
|
104 | .boundingClientRect()
|
105 | .exec((res) => {
|
106 | // 获取分辨率
|
107 | const pixelRatio = my.getSystemInfoSync().pixelRatio;
|
108 | // 获取画布实际宽高
|
109 | const canvasWidth = res[0].width;
|
110 | const canvasHeight = res[0].height;
|
111 | // 高清解决方案
|
112 | this.setData({
|
113 | width: canvasWidth * pixelRatio,
|
114 | height: canvasHeight * pixelRatio
|
115 | });
|
116 | const myCtx = my.createCanvasContext('area');
|
117 | myCtx.scale(pixelRatio, pixelRatio); // 必要!按照设置的分辨率进行放大
|
118 | const canvas = new F2.Renderer(myCtx);
|
119 | this.canvas = canvas;
|
120 | //console.log(res[0].width, res[0].height);
|
121 | drawChart(canvas, res[0].width, res[0].height);
|
122 | });
|
123 | },
|
124 | touchStart(e) {
|
125 | if (this.canvas) {
|
126 | this.canvas.emitEvent('touchstart', [e]);
|
127 | }
|
128 | },
|
129 | touchMove(e) {
|
130 | if (this.canvas) {
|
131 | this.canvas.emitEvent('touchmove', [e]);
|
132 | }
|
133 | },
|
134 | touchEnd(e) {
|
135 | if (this.canvas) {
|
136 | this.canvas.emitEvent('touchend', [e]);
|
137 | }
|
138 | }
|
139 | });
|
140 | ```
|
141 |
|
142 |
|
143 | ## API
|
144 |
|
145 | 由于 f2-canvas 组件主要是对小程序的画布上下文和 html5 canvas 的上下文进行了适配以支持 F2 在小程序端的渲染,所以 **F2 能绘制什么图表,小程序端就能绘制什么图表**,使用时也只需按照 F2 的语法来写即可。
|
146 |
|
147 | 具体 F2 的 api 参考:https://antv.alipay.com/zh-cn/f2/3.x/api/index.html
|
148 |
|
149 |
|
150 | ## 如何贡献
|
151 |
|
152 | 如果您在使用的过程中碰到问题,可以先通过 [issues](https://github.com/antvis/wx-f2/issues) 看看有没有类似的 bug 或者建议。
|
153 |
|
154 | ## License
|
155 |
|
156 | [MIT license](https://github.com/antvis/wx-f2/blob/master/LICENSE)
|