用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

微信小程序开发之画布canvas 饼状图

天下雪 2016-10-28 12:32

微信小程序开发的时候会遇到统计功能的开放.今天想做一个饼状图,群里有朋友造了轮子,我整理了一下,加了一些注释,分享出来.先说说canvas:1.微信里面canvas标签默认宽度300px、高度225px,可自行修改.2.同一页面中的 ca ...

微信小程序开发的时候会遇到统计功能的开放.今天想做一个饼状图,群里有朋友造了轮子,我整理了一下,加了一些注释,分享出来.

先说说canvas:

1.微信里面canvas标签默认宽度300px、高度225px,可自行修改.

2.同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,

 canvas 标签对应的画布将被隐藏并不再正常工作;

不懂的可以看看文档.虽说并没有什么用.

微信canvas文档


老规矩,上图.

代码:

就两个文件一个wxml,一个js

1.pie.js

[javascript] view plain copy
  1. Page( {  
  2.     onReady: function() {  
  3.         // 页面渲染完成  
  4.         //使用wx.createContext获取绘图上下文context  
  5.         var context = wx.createContext();  
  6.         // 画饼图  
  7.         //    数据源  
  8.         var array = [ 20, 30, 40, 50 ];  
  9.         var colors = [ "#ff0000""#ffff00""#0000ff""#00ff00" ];  
  10.         var total = 0;  
  11.         //    计算总量  
  12.         forvar index = 0;index < array.length;index++ ) {  
  13.             total += array[ index ];  
  14.         }  
  15.         //    定义圆心坐标  
  16.         var point = { x: 100, y: 100 };  
  17.         //    定义半径大小  
  18.         var radius = 60;  
  19.         /*    循环遍历所有的pie */  
  20.         forvar i = 0;i < array.length;i++ ) {  
  21.             context.beginPath();  
  22.             //      起点弧度  
  23.             var start = 0;  
  24.             if( i > 0 ) {  
  25.                 // 计算开始弧度是前几项的总和,即从之前的基础的上继续作画  
  26.                 forvar j = 0;j < i;j++ ) {  
  27.                     start += array[ j ] / total * 2 * Math.PI;  
  28.                 }  
  29.             }  
  30.             console.log( "i:" + i );  
  31.             console.log( "start:" + start );  
  32.             //      1.先做第一个pie  
  33.             //      2.画一条弧,并填充成三角饼pie,前2个参数确定圆心,第3参数为半径,第4参数起始旋转弧度数,第5参数本次扫过的弧度数,第6个参数为时针方向-false为顺时针  
  34.             context.arc( point.x, point.y, radius, start, array[ i ] / total * 2 * Math.PI, false );  
  35.             //      3.连线回圆心  
  36.             context.lineTo( point.x, point.y );  
  37.             //      4.填充样式  
  38.             context.setFillStyle( colors[ i ] );  
  39.             //      5.填充动作  
  40.             context.fill();  
  41.             context.closePath();  
  42.         }  
  43.         //调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为  
  44.         wx.drawCanvas( {  
  45.             //指定canvasId,canvas 组件的唯一标识符  
  46.             canvasId: 'mypie',  
  47.             actions: context.getActions()  
  48.         });  
  49.     }  
  50. })  

注释已经写好.看起来很方便.


2.pie.wxml

[html] view plain copy
  1. <!--通过canvas-id引入canvas-->  
  2. <canvas canvas-id="mypie" style="width:200px;height:200px;"></canvas>  
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: dzp_coder 来自: 授权地址

相关阅读