摘要:本文将带你了解微信小程序开发之折线图,希望本文对大家学微信有所帮助。
本文将带你了解微信小程序开发之折线图,希望本文对大家学微信有所帮助。
缘起昨天微信团队发布了神器——小程序数据助手,想起自己以前也写过一个很简陋的饼图绘制的demo,那么就再搞点事,画个折线图。目标页面目前实现效果折线图思路1.Line连线、画空心圆圈2.描圆圈3.填充背景色4.监听触摸手势5.随着滑动读取数据并显示说明1-4点应该不难理解,第5点需要处理手势滑动的步长,是以天为单位,一天一移动;浮动层跟随当前日期移动而移动,其位置当处在对侧的半屏区域中,比如接近右屏边缘时,要在浮动层置左。实现效果步骤1.获取数据小程序已经开放了统计接口,直接拿真实的数据过来做了。https://mp.weixin.qq.com/debug/wxadoc/dev/api/analysis.html#日趋势以日趋势数据为例,按照文档,先取到access_token,再向https://api.weixin.qq.com/datacube/getweanalysisappiddailysummarytrend?access_token=ACCESS_TOKEN请求数据,传入起始日期做为参数。这里有一个巨坑,只能够起始入传同一天,否则,返回时报range过界错误。整理得到的数组数据示例如下[
{
"ref_date": "20170412",
"session_cnt": 8,
"visit_pv": 49,
"visit_uv": 4,
"visit_uv_new": 1,
"stay_time_uv": 73.75,
"stay_time_session": 36.875,
"visit_depth": 3.25
},
{
"ref_date": "20170413",
"session_cnt": 10,
"visit_pv": 81,
"visit_uv": 8,
"visit_uv_new": 2,
"stay_time_uv": 351.25,
"stay_time_session": 281,
"visit_depth": 3.5
}
...
]2.画折线var data = require('../../data/daily.js');
Page({
data: {
}, //事件处理函数
onLoad: function () { // 画布高度,与CSS中定义等值
var canvasHeight = 100; // x轴放大倍数
var ratioX = 10; // y轴放大倍数
var ratioY = 2; const context = wx.createCanvasContext('line-canvas');
data.daily.forEach(function(daily, i, array) { // 当前点坐标
var currentPoint = {
x: i * ratioX,
y: canvasHeight - daily.visit_uv_new * ratioY
}; /* 画折线 */
if (i < array.length - 1) { // 开始
context.beginPath(); // 移动到当前点
context.moveTo(currentPoint.x, currentPoint.y); // 画线到下个点
context.lineTo((i + 1) * ratioX, canvasHeight - array[i + 1].visit_uv_new * ratioY); // 设置属性
context.setLineWidth(1); // 设置颜色
context.setStrokeStyle('#7587db'); // 描线
context.stroke();
} /* 画圆圈 */
});
context.draw();
}
})写代码的过程中,犯一个错误,将context.draw();方法放在forEach循环体中了,于是只显现出最后一段折线,之前的绘制的全被覆盖了。效果如图3.画圆圈画圆的本质是画弧,以当前点作为圆心,画半径为3的弧;填充为白色背景,要覆盖折线的拐点。fill()与stroke()分别填充背景与描边。/* 画圆圈 */context.beginPath();
context.arc(currentPoint.x, currentPoint.y, 2, 0, 2 * Math.PI);context.setStrokeStyle(purple);
context.setFillStyle('white');
context.stroke();
context.fill();效果如图4.画参照线画横线的同时,标上数值。 /* 画横向参照线 */
var lineCount = 4;
var estimateRatio = 3;
var ratio = canvasHeight / lineCount; for (var i = 0; i < lineCount; i++) {
context.beginPath();
var currentPoint = {
x: 0,
y: canvasHeight - i * ratio
}; // 移动到原点
context.moveTo(currentPoint.x, currentPoint.y); // 向Y正轴方向画线
context.lineTo(canvasWidth, canvasHeight - i * ratio); // 设置属性
context.setLineWidth(1); // 设置颜色
context.setStrokeStyle(gray);
context.stroke(); // 标注数值
context.setFillStyle(gray);
context.fillText((i * ratio / estimateRatio).toFixed(0), currentPoint.x, currentPoint.y);
}以上代码中estimateRatio,是估算的一值,因为到目前为止,还没有计算报表数据中最大的Y值是几许。效果如图填充紫色背景目前看起来都是白底,光秃秃一条折线不免单调,因此要填充上从折线与x轴之前的面积区域。思路是:每画一段,便自由落体拐头向下,左往x轴负方向回到上一个的位置,最后与上一个点闭合,于是形成了一个梯形结构,经多次fill()方法填充后,实现了面积图的效果。// 竖直往下,至x轴context.lineTo(nextPoint.x, canvasHeight);// 水平往左,至上一个点的在x轴的垂点context.lineTo(currentPoint.x, canvasHeight);// 设置淡紫色context.setFillStyle(lightPurple);// 实现闭合与x轴之前的区域context.fill();将以上代码放在画折线图forEach循环体的最末。得到上述最终效果。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号