http://blog.csdn.net/qq_31383345/article/details/52944685 源码
微信小程序开发的时候会遇到统计功能的开放.今天想做一个饼状图,群里有朋友造了轮子,我整理了一下,加了一些注释,分享出来.
先说说canvas:
1.微信里面canvas标签默认宽度300px、高度225px,可自行修改.
2.同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,
该 canvas 标签对应的画布将被隐藏并不再正常工作;
不懂的可以看看文档.虽说并没有什么用.
微信canvas文档
老规矩,上图.
![](https://img-blog.csdn.net/20161027122742366?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
代码:
就两个文件一个wxml,一个js
1.pie.js
- Page( {
- onReady: function() {
-
-
- var context = wx.createContext();
-
-
- var array = [ 20, 30, 40, 50 ];
- var colors = [ "#ff0000", "#ffff00", "#0000ff", "#00ff00" ];
- var total = 0;
-
- for( var index = 0;index < array.length;index++ ) {
- total += array[ index ];
- }
-
- var point = { x: 100, y: 100 };
-
- var radius = 60;
-
- for( var i = 0;i < array.length;i++ ) {
- context.beginPath();
-
- var start = 0;
- if( i > 0 ) {
-
- for( var j = 0;j < i;j++ ) {
- start += array[ j ] / total * 2 * Math.PI;
- }
- }
- console.log( "i:" + i );
- console.log( "start:" + start );
-
-
- context.arc( point.x, point.y, radius, start, array[ i ] / total * 2 * Math.PI, false );
-
- context.lineTo( point.x, point.y );
-
- context.setFillStyle( colors[ i ] );
-
- context.fill();
- context.closePath();
- }
-
- wx.drawCanvas( {
-
- canvasId: 'mypie',
- actions: context.getActions()
- });
- }
- })
注释已经写好.看起来很方便.
2.pie.wxml
-
- <canvas canvas-id="mypie" style="width:200px;height:200px;"></canvas>
出处:
微信小程序绘图课程之制作饼图
微信小程序开发
http://blog.csdn.NET/qq_31383345/article/details/52900835