支付宝小程序中使用F2图表

介绍

最近在支付宝小程序开发中接到显示图表的需求，因为支付宝小程序方未提供相关插件，并且目前支付宝小程序不支持document，所以根据推荐使用f2-canvas图表组件。
由于 f2-canvas 组件主要是对小程序的画布上下文和 html5 canvas 的上下文进行了适配以支持 F2 在小程序端的渲染，所以 F2 能绘制什么图表，小程序端就能绘制什么图表。语法也可以按照F2来。
F2 API：https://antv.alipay.com/zh-cn/f2/3.x/api/index.html

效果图

附上最近做的效果图：

f2-canvas在小程序中的使用步骤：（以折线图为例）

小程序中安装依赖：npm install @antv/my-f2
.acss文件

canvas {width: 100%;height: 100%;
}

.axml文件

<canvas id="area" onTouchStart="touchStart" onTouchMove="touchMove"
onTouchEnd="touchEnd" width="{{width}}" height="{{height}}" />

.js文件

 import F2 from '@antv/my-f2';const app = getApp();const api = require('/api/api/index.js')；Page({data: {},onLoad(options) {},onReady() {let me = this;// 折线图my.createSelectorQuery().select('#area').boundingClientRect().exec((res) => {// 获取分辨率const pixelRatio = my.getSystemInfoSync().pixelRatio;// 获取画布实际宽高const canvasWidth = res[0].width;const canvasHeight = res[0].height;// 高清解决方案me.setData({width: canvasWidth * pixelRatio,height: canvasHeight * pixelRatio});const myCtx = my.createCanvasContext('area');myCtx.scale(pixelRatio, pixelRatio); //按照设置的分辨率进行放大const canvas = new F2.Renderer(myCtx);me.canvas = canvas;me.drawLineChart(canvas, res[0].width, res[0].height);});},// 折线drawLineChart(canvas, width, height) {let me = this;let url = api.generalSituationInfo;let params = {};let header = 'application/json';app.request(url, params, 'GET', header, true).then(res => {if (res.code == 0) {const data = res.data.dataList;  //折线图数据源const chart = new F2.Chart({el: canvas,width,height,padding: [10, 0, 60, 0]});chart.source(data, {hours: {tickCount: 5,  //x默认显示5个时间}});chart.axis('hours', {line: null,  //x轴线不显示label: function label(text, index, total) { //设置X轴字体颜色大小等const textCfg = {fill: '#ADCAEF',fontSize: 12};if (index === 0) {textCfg.textAlign = 'left';} else if (index === total - 1) {textCfg.textAlign = 'right';}return textCfg;}});chart.axis('number', {grid: null  //去掉网格线});chart.legend({  //设置图例样式位置等position: 'bottom',align: 'center',itemWidth: null,nameStyle: {fill: '#ADCAEF'},});chart.tooltip({  //设置提示信息的样式等crosshairsStyle: {stroke: 'white',lineWidth: 1},showCrosshairs: true,custom: true, // 自定义 tooltip 内容框onShow: function onShow(ev) {me.setData({currentHour: ev.items[0].title,hourCount: ev.items[0].value,weekDisplay: 'day'})}});chart.line().position('hours*number').color('type', function (type) {if (type === '今日访问数') {  //设置折线的颜色return 'white';}if (type === '昨日访问数') {return '#7EB0F8';}}).shape('smooth') chart.render();return chart;}})},touchStart(e) {if (this.canvas) {this.canvas.emitEvent('touchstart', [e]);}},touchMove(e) {if (this.canvas) {this.canvas.emitEvent('touchmove', [e]);}},touchEnd(e) {if (this.canvas) {this.canvas.emitEvent('touchend', [e]);}}
});

提供测试的json数据：（替换数据源data）

[{"hours":"01:00","number":0,"type":"今日访问数"},{"hours":"02:00","number":0,"type":"今日访问数"},{"hours":"03:00","number":0,"type":"今日访问数"},{"hours":"04:00","number":0,"type":"今日访问数"},{"hours":"05:00","number":0,"type":"今日访问数"},{"hours":"06:00","number":0,"type":"今日访问数"},{"hours":"07:00","number":4,"type":"今日访问数"},{"hours":"08:00","number":17,"type":"今日访问数"},{"hours":"09:00","number":7,"type":"今日访问数"},{"hours":"10:00","number":7,"type":"今日访问数"},{"hours":"11:00","number":6,"type":"今日访问数"},{"hours":"12:00","number":1,"type":"今日访问数"},{"hours":"13:00","number":0,"type":"今日访问数"},{"hours":"14:00","number":0,"type":"今日访问数"},{"hours":"15:00","number":0,"type":"今日访问数"},{"hours":"16:00","number":0,"type":"今日访问数"},{"hours":"17:00","number":0,"type":"今日访问数"},{"hours":"18:00","number":0,"type":"今日访问数"},{"hours":"19:00","number":0,"type":"今日访问数"},{"hours":"20:00","number":0,"type":"今日访问数"},{"hours":"21:00","number":0,"type":"今日访问数"},{"hours":"22:00","number":0,"type":"今日访问数"},{"hours":"23:00","number":0,"type":"今日访问数"},{"hours":"00:00","number":0,"type":"今日访问数"},{"hours":"01:00","number":0,"type":"昨日访问数"},{"hours":"02:00","number":0,"type":"昨日访问数"},{"hours":"03:00","number":0,"type":"昨日访问数"},{"hours":"04:00","number":0,"type":"昨日访问数"},{"hours":"05:00","number":0,"type":"昨日访问数"},{"hours":"06:00","number":0,"type":"昨日访问数"},{"hours":"07:00","number":4,"type":"昨日访问数"},{"hours":"08:00","number":17,"type":"昨日访问数"},{"hours":"09:00","number":5,"type":"昨日访问数"},{"hours":"10:00","number":6,"type":"昨日访问数"},{"hours":"11:00","number":6,"type":"昨日访问数"},{"hours":"12:00","number":19,"type":"昨日访问数"},{"hours":"13:00","number":18,"type":"昨日访问数"},{"hours":"14:00","number":4,"type":"昨日访问数"},{"hours":"15:00","number":15,"type":"昨日访问数"},{"hours":"16:00","number":8,"type":"昨日访问数"},{"hours":"17:00","number":18,"type":"昨日访问数"},{"hours":"18:00","number":33,"type":"昨日访问数"},{"hours":"19:00","number":12,"type":"昨日访问数"},{"hours":"20:00","number":5,"type":"昨日访问数"},{"hours":"21:00","number":2,"type":"昨日访问数"},{"hours":"22:00","number":0,"type":"昨日访问数"},{"hours":"23:00","number":0,"type":"昨日访问数"},{"hours":"00:00","number":0,"type":"昨日访问数"}]

*git地址：https://github.com/antvis/my-f2

组件形式：https://github.com/ant-mini-program/mini-chart

支付宝小程序中使用F2图表相关推荐

在h5页面中调起支付宝小程序中的某一个页面以及URLScheme 之支付宝
在h5页面中调起支付宝小程序中的某一个页面直接上代码: window.location.href = 'alipays://platformapi/startapp?appId=2021001181 ...
基于uniapp在微信支付宝小程序中使用发券插件
基于uniapp在微信支付宝小程序中使用发券插件 1.在小程序配置manifest.json 文件中加入如下配置: "mp-weixin" : {"plugins&quo ...
支付宝小程序中出现拖动页面，旁边出现白边
支付宝小程序中出现拖动页面,旁边出现白边解决方法: 在全局样式文件中添加height,width都为100%: 如果还不能解决的话可能是因为你的页面里面有的元素已经超过了750rpx:或者就是你使用 ...
支付宝小程序中“”号写法
今天遇到一个小问题,记录一下 "<"号在h5页面都是可以直接显示的,但是在运行支付宝小程序时报错,找了一个解决办法 <text> {{char_lt}} 18.5 ...
如何在微信小程序中使用ECharts图表
在微信小程序中使用ECharts 1. 下载插件首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目. 下载链接:ecomfe/echarts-for-weixi ...
uni-app浏览器、iPhone手机显示轮播图，微信、支付宝小程序中不显示的错误原因及解决办法
源码: index.vue: <template><view class="main"><swiper :indicator-dots="t ...
在钉钉小程序中使用可视化图表插件F2
阿里系的可视化图表如何使用?看下面的代码 <view class="f2-chart"><f2 onInit="onInitChart"> ...
支付宝小程序中Navigator和导航栏之间的区别以及用法场景的分析
区别: 1.navigator是属于小程序组件中的,导航栏是属于小程序API中的 2.navigator组件是用在axml页面中跳转的导航,它有4种类型(见下表):导航栏API是用在js中实现页面跳转 ...
支付宝小程序中实现验证码倒计时效果
有需要验证码的地方可能就需要做到这个样子吧 index.axml <view a:if="{{yz}}" onTap="getCode">获取验证 ...

支付宝小程序中使用F2图表

支付宝小程序中使用F2图表

介绍

效果图

f2-canvas在小程序中的使用步骤：（以折线图为例）

*git地址：https://github.com/antvis/my-f2

组件形式：https://github.com/ant-mini-program/mini-chart

支付宝小程序中使用F2图表相关推荐

最新文章

热门文章