需求
在用户查看自己发布的问卷时,我们希望可以查看到每个选项被选择的次数。
但是这样的界面不够直观,为了让用户快速了解各个选项的被选情况,我们希望绘制条形图,使得查看效果更加直观。
实现过程
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选项虽然没有人选,但是条形图中还是有一丢丢的宽度,提醒用户这么还有个被遗忘的选项。但是好像有点丑。。。