资讯专栏INFORMATION COLUMN

在微信小程序中绘制图表(part1)

chaosx110 / 2692人阅读

摘要:微信小程序中提供了的支持,利用自行绘制图表。关注我的项目查看完整代码。

微信小程序中图表现状

由于微信小程序本身框架的限制,很难集成目前已有的图表工具,显示图表目前有两种方案:
1、服务器端渲染图表,输出图片,微信小程序中直接显示渲染好的图片,比如highcharts提供了服务端渲染的能力hightcharts server render,这种方式需要后台有一套渲染服务,并且有一定的网络开销。
2、微信小程序API中提供了canvas的支持,利用canvas自行绘制图表。

下面我们来看下怎么在微信小程序中绘制图表。

关注我的 github项目 查看完整代码。

API

查看微信小程序详细 Canvas API 文档

在模板文件中使用声明一个canvas组件

使用wx.createContext获取绘图上下文 context

调用wx.drawCanvas进行绘制

wx.drawCanvas({
    canvasId: "firstCanvas",
    actions: context.getActions() // 获取绘图动作数组
});
开始图表的绘制 绘制折线图
// 获取绘图上下文 context
var context = wx.createContext();
// 设置描边颜色
context.setStrokeStyle("#7cb5ec");
// 设置线宽
context.setLineWidth(4);

context.moveTo(50, 70);
context.lineTo(150, 150);
context.lineTo(250, 30);
context.lineTo(350, 120);
context.lineTo(450, 150);
context.lineTo(550, 95);
// 对当前路径进行描边
context.stroke();
wx.drawCanvas({
    canvasId: "testCanvas",
    actions: context.getActions()
});

说明:moveTo方法不记录到路径中

效果图:

好像没有想象中难,看上去效果还不错

绘制每个数据点的标识图案
...

context.beginPath();
// 设置描边颜色
context.setStrokeStyle("#ffffff");
// 设置填充颜色
context.setFillStyle("#7cb5ec");
context.moveTo(50 + 7, 70);
// 绘制圆形区域
context.arc(50, 70, 8, 0, 2 * Math.PI, false);

context.moveTo(150 + 7, 150);
context.arc(150, 150, 8, 0, 2 * Math.PI, false);

...

context.closePath();
// 填充路径
context.fill();
context.stroke();

效果图:

说明:避免之前绘制的折线路径影响到标识图案的路径,这里包裹在了beginPathclosePath

绘制横坐标

规定我们的参数格式是这样的

opts = {
    width: 640,    // 画布区域宽度
    height: 400,   // 画布区域高度
    categories: ["2016-08", "2016-09", "2016-10", "2016-11", "2016-12", "2017"]
}

我们根据参数中的categories来绘制横坐标
稍微整理下思路:
1、根据categories数均分画布宽度
2、计算出横坐标中每个分类的起始点
3、绘制文案(这儿会多一些代码,后面会具体提到)

var eachSpacing = Math.floor(opts.width / opts.categories.length);
var points = [];
// 起始点x坐标
var startX = 0;
// 起始点y坐标
var startY = opts.height - 30;
// 终点x坐标
var endX = opts.width;
// 终点y坐标
var endY = opts.height;

// 计算每个分类的起始点x坐标
opts.categories.forEach(function(item, index) {
    points.push(startX + index * eachSpacing);
});
points.push(endX);

// 绘制横坐标
context.beginPath();
context.setStrokeStyle("#cccccc");
context.setLineWidth(1);

// 绘制坐标轴横线
context.moveTo(startX, startY);
context.lineTo(endX, startY);
// 绘制坐标轴各区块竖线
points.forEach(function(item, index) {
    context.moveTo(item, startY);
    context.lineTo(item, endY);
});
context.closePath();
context.stroke();

context.beginPath();
// 设置字体大小
context.setFontSize(20);
// 设置字体填充颜色
context.setFillStyle("#666666");
opts.categories.forEach(function(item, index) {
    context.fillText(item, points[index], startY + 28);
});
context.closePath();
context.stroke();

效果图:

效果不错,除了文字没有居中.......

查看微信小程序官方提供的文档并没有提供html5 canvas中的mesureText(获取文案宽度)方法,下面我们自己简单的实现,并不是绝对精确,但是误差基本可以忽略

function mesureText (text) {
    var text = text.split("");
    var width = 0;
    text.forEach(function(item) {
        if (/[a-zA-Z]/.test(item)) {
            width += 14;
        } else if (/[0-9]/.test(item)) {
            width += 11;
        } else if (/./.test(item)) {
            width += 5.4;
        } else if (/-/.test(item)) {
            width += 6.5;
        } else if (/[u4e00-u9fa5]/.test(item)) {
            width += 20;
        }
    });
    return width;
}

这里分别处理了字母, 数字, ., -, 汉字这几个常用字符

上面的代码稍微修改下:

opts.categories.forEach(function(item, index) {
    var offset = eachSpacing / 2 - mesureText(item) / 2;
    context.fillText(item, points[index] + offset, startY + 28);
});

大功告成!

如何在折线上绘制出每个数据点的数值文案大家可以动手自己实现下

预告:下一部分我们一起讨论如何根据真实的数据绘制折线以及如果确定纵坐标的范围和纵坐标分区的问题。

相关阅读

在微信小程序中绘制图表(part2)
在微信小程序中绘制图表(part3)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91185.html

相关文章

  • 在微信小程序绘制图表(part2)

    摘要:本期大纲确定纵坐标的范围并绘制根据真实数据绘制折线相关阅读在微信小程序中绘制图表在微信小程序中绘制图表关注我的项目查看完整代码。相关阅读在微信小程序中绘制图表在微信小程序中绘制图表 本期大纲 1、确定纵坐标的范围并绘制 2、根据真实数据绘制折线 相关阅读:在微信小程序中绘制图表(part1)在微信小程序中绘制图表(part3) 关注我的 github 项目 查看完整代码。 确定纵坐...

    canopus4u 评论0 收藏0
  • 在微信小程序绘制图表(part3)

    摘要:本期大纲饼图绘制如何添加动画效果使用构建项目相关阅读在微信小程序中绘制图表在微信小程序中绘制图表关注我的项目查看完整代码。 本期大纲 1、饼图绘制2、如何添加动画效果3、使用rollup构建项目 相关阅读:在微信小程序中绘制图表(part1)在微信小程序中绘制图表(part2) 关注我的 github 项目 查看完整代码。 很久没更新了,最近事情比较多,今天来把坑填上! 饼图绘制 ...

    褰辩话 评论0 收藏0

发表评论

0条评论

chaosx110

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<