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

最新推荐文章于 2024-09-12 18:14:16 发布

weixin_34336526

最新推荐文章于 2024-09-12 18:14:16 发布

阅读量288

点赞数

文章标签： python git

原文链接：https://my.oschina.net/huangxiujie/blog/900254

版权

2019独角兽企业重金招聘Python工程师标准>>>

缘起

昨天微信团队发布了神器——小程序数据助手，想起自己以前也写过一个很简陋的饼图绘制的demo，那么就再搞点事，画个折线图。

目标页面

小程序数据统计页面.png

目前实现效果

面积区域.png

折线图思路

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循环体中了，于是只显现出最后一段折线，之前的绘制的全被覆盖了。

效果如图

折线图.png

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();

效果如图

画点.png

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值是几许。

效果如图

参照线.png

填充紫色背景

目前看起来都是白底，光秃秃一条折线不免单调，因此要填充上从折线与x轴之前的面积区域。

思路是：每画一段，便自由落体拐头向下，左往x轴负方向回到上一个的位置，最后与上一个点闭合，于是形成了一个梯形结构，经多次fill()方法填充后，实现了面积图的效果。

// 竖直往下，至x轴
context.lineTo(nextPoint.x, canvasHeight);
// 水平往左，至上一个点的在x轴的垂点
context.lineTo(currentPoint.x, canvasHeight);
// 设置淡紫色
context.setFillStyle(lightPurple);
// 实现闭合与x轴之前的区域
context.fill();

将以上代码放在画折线图forEach循环体的最末。

得到上述最终效果。

面积区域.png 相应源码下载地址：http://git.oschina.net/dotton/demo-wx

今天先写到这里，后期持续更新。

转载于:https://my.oschina.net/huangxiujie/blog/900254