微信小程序绘制条形图

需求

在用户查看自己发布的问卷时，我们希望可以查看到每个选项被选择的次数。

但是这样的界面不够直观，为了让用户快速了解各个选项的被选情况，我们希望绘制条形图，使得查看效果更加直观。

实现过程

wxml布局

<block wx:if="{{style=='tiaoxing'}}">
  	<canvas style="width: 750rpx; height: 200rpx;" canvas-id="Canvastiaoxing{{item.quesOrder}}">
   	</canvas>
</block>

利用style来选择是否渲染条形图。

JS实现

var context = wx.createContext()

创建并返回绘图上下文。

var maxnumber = 0
for (var j = 0; j < question.optionsForQuesid.length; j++) {
	if (question.optionsForQuesid[j].weight > maxnumber) {
		maxnumber = question.optionsForQuesid[j].weight
	}
}

找出选择人数最多的选项。

var width = option.weight / maxnumber * res.windowWidth * 0.95
  if (width == 0)
    width = 2

将选择人数最多的选项条形图设置为屏幕宽度的0.95倍，并以此为比例，设置其他选项条形图的宽度。因为可能存在没有人选择过的选项。为了显示出存在这个选项，将宽度值为0的条形图改为宽度为2。

//开始创建一个路径
context.beginPath()
//设置纯色填充
context.setFillStyle(that.data.color[k % that.data.color.length])
//添加一个矩形路径到当前路径
context.rect(0, vertioffset, width, recheight)
//对当前路径进行填充
context.fill()

绘图实现，为了拯救眼花人群，每个条形图填充了不同的颜色。

最终效果

可以看到，每个选项都有自己的条形图，可以很清晰地看出每个选项选择的人数多少。问题1中的C选项虽然没有人选，但是条形图中还是有一丢丢的宽度，提醒用户这么还有个被遗忘的选项。但是好像有点丑。。。

感谢：https://github.com/chwangteng/questionare