柱图

canvas画图最主要的就是把一张图分成各个部分，然后一块一块的去进行绘制，比如柱图，在绘制的过程中就可以分成x轴，x轴的label，y轴，y轴的label，平行于x轴的分割线，以及每个柱体等等和一些细节。 柱图的x轴就是等分嘛，有几个数据就等分成几块，y轴就是先得出数据的最大值，然后看你想把这最大值均分成几份嘛，比如把1200分成4份，那y轴就是被均分成四份，每个刻度就是300

还是要强调一点，以为上面这个图片中的柱图用的是svg，所以一定要先加载图片，等图片加载完了之后再调用绘制函数

js

function DrawRect(dataArr1, dataArr2, nameArr, index) { var canvas = document.querySelector('#cav5') var cav = canvas.getContext('2d'); cav.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight); var width = canvas.clientWidth var height = canvas.clientHeight var zeroPoint = [width * 0.1, height * 0.9] //柱图图表零点坐标 var Yheight = height * 0.5 //图表高度 var Xwidth = width * 0.8 //图表宽度 var Ypoint = [zeroPoint[0], zeroPoint[1] - Yheight] //Y轴顶点坐标 var Xpoint = [zeroPoint[0] + Xwidth, zeroPoint[1]] //X轴右端坐标 var Xpatition = Xwidth * 0.95 / nameArr.length //第一个柱图的横坐标 var namePoint = [Xpatition / 2 + zeroPoint[0], zeroPoint[1] + 15] //X轴第一个label的坐标 //数据处理获取两个数组中的最大值 var max = dataArr1[0] for (let i = 0; i < dataArr1.length; i++) { if (max <= dataArr1[i]) { max = dataArr1[i] } } for (let i = 0; i < dataArr2.length; i++) { if (max <= dataArr2[i]) { max = dataArr2[i] } } var Ypatition = Yheight * 0.95 / 5 //Y轴分隔距离 var dataPoint = [zeroPoint[0] - 15, zeroPoint[1] - Ypatition / 2] //Y轴label的坐标 var YdataLabel = [] //Y轴label数组 var dataLabel = max / 5 //Y轴分割的倍数 for (let i = 0; i < 5; i++) { YdataLabel.push(dataLabel) dataLabel += max / 5 } var barWidth = 10 //柱体宽度 var linePoint = [] //柱图连线的端点坐标数组 var tipsPoint = [] //提示框的坐标数组 //Y轴 cav.beginPath() cav.moveTo(zeroPoint[0], zeroPoint[1]) cav.lineTo(Ypoint[0], Ypoint[1]) cav.strokeStyle = 'red' cav.closePath() cav.stroke() //X轴 cav.beginPath() cav.moveTo(zeroPoint[0], zeroPoint[1]) cav.lineTo(Xpoint[0], Xpoint[1]) cav.strokeStyle = 'red' cav.closePath() cav.stroke() //Y轴端点箭头 cav.beginPath() cav.moveTo(Ypoint[0], Ypoint[1]) cav.lineTo(Ypoint[0] - 3, Ypoint[1] + 3) cav.strokeStyle = 'red' cav.stroke() cav.save() cav.restore() cav.lineTo(Ypoint[0] + 3, Ypoint[1] + 3) cav.strokeStyle = 'red' cav.stroke() cav.closePath() cav.fillStyle = 'red' cav.fill() //X轴端点箭头 cav.beginPath() cav.moveTo(Xpoint[0], Xpoint[1]) cav.lineTo(Xpoint[0] - 3, Xpoint[1] - 3) cav.strokeStyle = 'red' cav.stroke() cav.save() cav.restore() cav.lineTo(Xpoint[0] - 3, Xpoint[1] + 3) cav.strokeStyle = 'red' cav.stroke() cav.closePath() cav.fillStyle = 'red' cav.fill() //Y轴文字及分割线 for (let i = 0; i < YdataLabel.length; i++) { cav.textAlign = 'end' cav.textBaseline = 'middle' cav.font = '14px' cav.fillStyle = 'red' cav.fillText(parseInt(YdataLabel[i]) + '', dataPoint[0], dataPoint[1]) cav.beginPath() cav.moveTo(zeroPoint[0], dataPoint[1]) cav.lineTo(Xpoint[0], dataPoint[1]) cav.strokeStyle = 'red' cav.closePath() cav.stroke() dataPoint[1] -= Ypatition } //高亮框 var lightHeightColor = cav.createLinearGradient(Xpatition * index + zeroPoint[0] + 15, zeroPoint[1] - Yheight, Xpatition * (index + 1) + zeroPoint[0] - 15, zeroPoint[1]); lightHeightColor.addColorStop(0, "rgba(53,103,235,1)"); lightHeightColor.addColorStop(1, 'rgba(53,103,235,0.3)'); cav.beginPath() cav.rect(Xpatition * (index) + zeroPoint[0], zeroPoint[1] - Yheight, Xpatition, Yheight) cav.fillStyle = lightHeightColor cav.fill() for (let i = 0; i < nameArr.length; i++) { //文字 cav.textAlign = 'center' cav.textBaseline = 'top' cav.font = '14px' cav.fillStyle = 'red' cav.fillText(nameArr[i], namePoint[0], namePoint[1]) //柱图 var barHeight1 = dataArr1[i] / max * 0.95 * Yheight - Ypatition / 2 var barHeight2 = dataArr2[i] / max * 0.95 * Yheight - Ypatition / 2 cav.drawImage(img, namePoint[0] - barWidth, zeroPoint[1] - barHeight1, barWidth, barHeight1) cav.drawImage(img3, namePoint[0] - barWidth, zeroPoint[1] - barHeight1 - img3.height / 2, barWidth, img3 .height) cav.drawImage(img2, namePoint[0], zeroPoint[1] - barHeight2, barWidth, barHeight2) cav.drawImage(img4, namePoint[0], zeroPoint[1] - barHeight2 - img4.height / 2, barWidth, img4.height) linePoint.push({ startX: namePoint[0] - barWidth / 2, startY: zeroPoint[1] - barHeight1, endX: namePoint[0] + barWidth / 2, endY: zeroPoint[1] - barHeight2 }) namePoint[0] += Xpatition } //连线 cav.beginPath() cav.setLineDash([2]); cav.strokeStyle = "#fff" cav.moveTo(linePoint[index].startX, linePoint[index].startY) cav.lineTo(linePoint[index].endX, linePoint[index].endY) cav.closePath() cav.stroke() //连线端点圆点 cav.beginPath() cav.arc(linePoint[index].startX, linePoint[index].startY, 2, 0, Math.PI * 2, false) cav.fillStyle = '#fff' cav.closePath() cav.fill() cav.beginPath() cav.arc(linePoint[index].endX, linePoint[index].endY, 2, 0, Math.PI * 2, false) cav.fillStyle = '#fff' cav.closePath() cav.fill() //文字框 if (dataArr1[index] > dataArr2[index]) { if(index==dataArr2.length-1) { tipsPoint[0] = linePoint[index].startX-tipsImg.width }else { tipsPoint[0] = linePoint[index].startX } tipsPoint[1] = linePoint[index].startY - tipsImg.height } else { if(index==dataArr2.length-1) { tipsPoint[0] = linePoint[index].endX-tipsImg.width }else { tipsPoint[0] = linePoint[index].endX } tipsPoint[1] = linePoint[index].endY - tipsImg.height } cav.drawImage(tipsImg, tipsPoint[0], tipsPoint[1]) cav.textAlign = 'start' cav.textBaseline = 'middle' cav.font = '14px' cav.fillStyle = 'red' cav.fillText('独立用户', tipsPoint[0] + 10, tipsPoint[1] + tipsImg.height / 3) cav.textAlign = 'right' cav.textBaseline = 'middle' cav.font = '14px' cav.fillStyle = '#fff' cav.fillText(dataArr1[index], tipsPoint[0] + tipsImg.width - 12, tipsPoint[1] + tipsImg.height / 3) cav.textAlign = 'start' cav.textBaseline = 'middle' cav.font = '14px' cav.fillStyle = 'red' cav.fillText('浏览量', tipsPoint[0] + 10, tipsPoint[1] + tipsImg.height - 15) cav.textAlign = 'right' cav.textBaseline = 'middle' cav.font = '14px' cav.fillStyle = '#fff' cav.fillText(dataArr2[index], tipsPoint[0] + tipsImg.width - 12, tipsPoint[1] + tipsImg.height - 15) }