一、html
html本身很简单，就是引入jquery和自己写的一个js，调用一下自己写的js的一个方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas柱状图demo</title>
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
<script src="jquery-2.0.3.min.js"></script>
<script src="drawCanvas.js"></script>
</head>
<body id="body">
</body>
<script>
showResult();
</script>
</html>
二、drawCanvas.js
这里我写的有点复杂，考虑适配了。有时间来重新优化一下这里的代码，至少有点可读性吧。
function showResult(info){
//console.log(info);
//console.log(JSON.parse(info));
info = '[{"selectName":"A","selectNum":3,"isRight":0},{"selectName":"A","selectNum":13,"isRight":0},{"selectName":"B","selectNum":28,"isRight":1}]';
var results = JSON.parse(info);
var selectNum = results.length;
var maxNum = 0;
for(var i =0;i<results.length;i++){
console.log(maxNum+"/"+results[i].selectNum);
if(maxNum < parseInt(results[i].selectNum)){
maxNum = parseInt(results[i].selectNum);
}
}
var maxLineNum = Math.ceil(maxNum/5)*5;
var xPlus = 0.9/(selectNum+1);
var xStart = xPlus;
var yStart = 0.9;
var lineColor = "#e5e5e5";
var rightRecColor = '#3dc600';
var wrongRecColor = '#f65e5e';
var xyFontColor = "#aaaaaa";//#999999不好看
var selectFontColor = "#666666";
var cw = document.documentElement.clientWidth;
var ch = document.documentElement.clientHeight;
var fontSize = cw/54;//54
var fontAndSize = fontSize + "px Arial";
var rect_w = cw/12;//120
$("body").append('<canvas id="js-test-result" width="'+cw+'" height="'+ ch +'"></canvas>');
// $("#js-test-result").css("width",cw);
// $("#js-test-result").css("height",ch);
$("#js-test-result").css("background","#ffffff");
var resultCanvas = document.getElementById("js-test-result");
var rcxt = resultCanvas.getContext("2d");
rcxt.clearRect(0,0,cw,ch);
$("#js-test-result").show();
var num = 35;
//x轴 及其平行轴
for(var i =1;i< 9;i++){
rcxt.strokeStyle= lineColor;
rcxt.beginPath();
rcxt.moveTo(cw*0.1,ch*(i*0.1+0.1));
rcxt.lineTo(cw*0.9,ch*(i*0.1+0.1));
rcxt.closePath();
rcxt.stroke();
//画选项
rcxt.font=fontAndSize;
rcxt.fillStyle = selectFontColor;
if(num<10){
//rcxt.fillText(" "+num,cw*0.1-fontSize*2,ch*(i*0.1+0.1));
}else{
//rcxt.fillText(num,cw*0.1-fontSize*2,ch*(i*0.1+0.1));
}
num=num-5;
}
//y轴
rcxt.strokeStyle= lineColor;
rcxt.beginPath();
rcxt.moveTo(cw*0.1,ch*0.9);
rcxt.lineTo(cw*0.1,ch*0.1);
rcxt.closePath();
rcxt.stroke();
// 画方块
for (var i =0;i<selectNum;i++){
var result = results[i];
if(result.isRight == 1){
rcxt.fillStyle = rightRecColor;
}else{
rcxt.fillStyle = wrongRecColor;
}
var recH = ch*0.8*result.selectNum/maxLineNum;
console.log(result.selectNum+"/"+maxLineNum);
rcxt.fillRect(cw*(xStart+i*xPlus),ch*yStart-recH,rect_w,recH);//(x,y,width,height);
//画选项
rcxt.font=fontAndSize;
rcxt.fillStyle = selectFontColor;
rcxt.fillText(result.selectName + "选项 ("+result.selectNum+"人)",cw*(xStart+(i-0.03)*xPlus),ch*yStart+fontSize);
}
//画正确标识
rcxt.fillStyle = rightRecColor;
rcxt.fillRect(cw*0.8-1.2*fontSize,ch*0.1-1.6*fontSize,fontSize,fontSize/2);//(x,y,width,height);
rcxt.font=fontAndSize;
rcxt.fillStyle = xyFontColor;
rcxt.fillText("正确答案",cw*0.8,ch*0.1-fontSize);
//画正确标识
rcxt.fillStyle = wrongRecColor;
rcxt.fillRect(cw*0.9-1.2*fontSize,ch*0.1-1.6*fontSize,fontSize,fontSize/2);//(x,y,width,height);
rcxt.font=fontAndSize;
rcxt.fillStyle = xyFontColor;
rcxt.fillText("错误答案",cw*0.9,ch*0.1-fontSize);
}
效果：
效果图
网友评论