258资源分享网

仿小程序数据助手数据页面之折线图

 

 

 

缘起

昨天微信团队发布了神器——小程序数据助手，想起自己以前也写过一个很简陋的饼图绘制的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.画圆圈