想了解更多开源内容请访问：开源基础软件社区https://ost.51cto.com前言最近有个直方图在项目中发挥作用。看了JS中的组件图，发现要求不适用。经过研究，我决定用画布画一个。项目描述本项目基于ArkUI中JS扩展的类Web开发范式。语法和概念参考官网官方文档地址：基于JS扩展的类Web开发范式1基于JS扩展的类Web开发范式2。工具版本：DevEcoStudio3.0Beta2。SDK版本：3.0.0.1（API版本7Beta2）。提供自定义绘制图形的画布组件：Canvas组件canvas。效果演示默认选择第一个，点击直方图可以切换选中的效果。但是，我发现在绘制比较复杂的内容时，调用clearRect()后，重绘内容会出现闪烁。在官网论坛上问过其他人，他们都遇到了这个问题。希望官方能尽快修复这个bug。使用的API实现分组件设置上下左右间距，所以内容区域宽度=组件宽度-左间距-右间距，内容区域高度=组件高度-上间距-下间距。1.画水平线（x轴），右边的文字//获取canvas组件constelement=this.$refs.canvas;//获取绘图上下文constctx=element.getContext('2d',{antialias:true});//获取组件大小和位置信息constrect=element.getBoundingClientRect()//测量y轴最大文本长度constyTextMaxWidth=ctx.measureText(''+this.yAxisMaxValue).width//x轴起始坐标constxAxisStart=this.paddingLeft//x轴结束坐标=组件宽度-右间距-y轴文本最大宽度constxAxisEnd=rect.width-this.paddingRight-yTextMaxWidth//y轴初始坐标constyAxisStart=this.paddingTop//Y轴结束坐标=组件高度-底部间距-底部文字高度-文字顶部间距constyAxisEnd=rect.height-this.paddingBottom-10-this.xAxisTextTopPadding//y轴初值-图文texletyValue=this.yAxisMaxValue//y轴平均值-图文textletyAverageValue=(this.yAxisMaxValue-this.yAxisMinValue)/this.yAxisDivide//y轴初始坐标letyAxis=yAxisStart//画水平线，在右边画文字while(yAxis<=yAxisEnd){//画一条线//保存当前绘图上下文ctx.save()//线条颜色ctx.strokeStyle=this.xAxisColor//创建一个新的绘图路径ctx.beginPath()//线条宽度ctx.lineWidth=this.xAxisWidth//从什么时候开始的路径将上一个点移动到指定点ctx.moveTo(xAxisStart,yAxis)//连接当前点到指定点的路径ctx.lineTo(xAxisEnd,yAxis)//执行边框绘制操作ctx.stroke();//保存恢复绘图上下文ctx.restore()//绘制文本ctx.save()//指定绘图的填充颜色ctx.fillStyle=this.yAxisTextColor//设置文本绘图的字体样式ctx.font=this.yAxisTextFont//设置文字绘制时的文字对齐方式：文字右对齐ctx.textAlign='right'//绘制填充文字ctx.fillText(''+yValue,xAxisEnd+yTextMaxWidth,yAxis+2.5)ctx.restore()//右边的TextyValue-=yAverageValue//更新y轴坐标：每次把y轴平分yAxis+=(yAxisEnd-yAxisStart)/this.yAxisDivide}2、绘制柱状图，底部文字//绘制x轴的实际宽度，两边的直方图不是并排的constxDrawWidth=xAxisEnd-xAxisStart-this.xAxisPadding*2//起点letxAxis=this.paddingLeft+this.xAxisPadding//x轴平均值letxAverageWidth=(xDrawWidth)/(this.chartData.length-1)//在x轴上绘制文本和数据for(leti=0;i
