更多信息请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com前言我们实现了一个之前是简单的直方图，那么同理，我们如何使用鸿蒙Jacascript实现一个简单的折线图呢？折线图在讲直方图的时候，我们已经详细描述了如何绘制我们的坐标轴，线图的轴的绘制方式和直方图的轴几乎是一样的，所以本文不再讨论.关于坐标轴绘制和箭头绘制的解释，可以查看上一期直方图绘制：非常希望读者能够充分理解本期直方图的文章，因为折线图绘制中使用的坐标本文详细解释了要点。坐标轴的绘制类似于直方图。我们先定义绘制折线图时要用到的数据：obj:{chartZone:[],//图表左上角和右下角的坐标数组yAxisLable:[],//Y轴contentyMax:0,//Y轴最大值guideLine:true,//是否有辅助线dataPoint:true,//是否有数据点xAxisLable:[],//X轴内容data:[],//数据内容lineStyle:{line_width:0,//数据条的宽度color:'#1abc9c',//折线的颜色radius:0//数据点的半径},axisArrow:{size:'2',//ArrowfactorSizecolor:'red'//Arrowfillcolor},dataStyle:{radius:5,color:"#ee6587"}我们折线图的总功能也是一样的直方图：draw(){this.drawAxis()this.drawYLables()this.drawXLables()this.drawData()this.drawArrow()this.drawArrowY()}，再次给出绘制坐标轴的代码以及坐标轴上的内容：//绘制X、Y坐标轴drawAxis(){letchartZone=this.option.chartZoneconstel=this.$element('the-canvas');constcontext=el.getContext('2d');context.save()context.lineWidth=2context.strokeStyle='#353535'context.beginPath()context.moveTo(chartZone[0],chartZone[1])context.lineTo(chartZone[0],chartZone[3])context.lineTo(chartZone[2],chartZone[3])上下文.stroke()},//绘制Y轴坐标drawYLabels(){constel=this.$element('the-canvas');constcontext=el.getContext('2d');context.save()letlabels=this.option.yAxisLable;让yLength=(this.option.chartZone[3]-this.option.chartZone[1])*0.98让gap=yLength/(labels.length-1)让option=this.optionlabels.forEach(function(label,index){//绘制坐标文本//offset为y轴上的数据与y轴的距离letoffset=context.measureText(label).width+20context.strokeStyle='#eaeaea';context.font="16px"context.fillText(label,option.chartZone[0]-offset,option.chartZone[3]-index*gap);//绘制小间隔context.strokeStyle='#353535';context.beginPath();context.moveTo(option.chartZone[0]-10,option.chartZone[3]-index*gap);context.lineTo(option.chartZone[0],option.chartZone[3]-index*gap)context.stroke()})},//绘制x轴坐标drawXLables(){constel=this.$element('画布');constcontext=el.getContext('2d');让标签=this.option.xAxisLable;让xLength=(this.option.chartZone[2]-this.option.chartZone[0])*0.96让gap=xLength/(labels.length)让option=this.optionlabels.forEach(function(label,index){//绘制坐标文字letoffset=context.measureText(label).widthcontext.save()context.strokeStyle='#eaeaea';context.font="18px"context.fillText(label,option.chartZone[0]+(index+1)*gap-offset/2,option.chartZone[3]+30);//绘制间隔context.beginPath();context.strokeStyle='#353535';context.moveTo(option.chartZone[0]+(index+1)*gap,option.chartZone[3]);context.lineTo(option.chartZone[0]+(index+1)*gap,option.chartZone[3]+10)context.stroke()//存储偏移量option.offsetXLabel=offset/2})},数据绘制接下来我们进入重点：绘图数据绘图数据将被绘制由三个模块组成：绘制折线、绘制虚线辅助线、绘制数据点。其实为了方便理解，我们应该先了解数据点的坐标，然后再想怎么画折线和虚线，但是在canvas中，先画的内容会压在最下面，然后绘制的内容会出现在最上面，所以我们绘制的顺序应该是：折线、虚线、数据点。画线线图的绘制其实比直方图简单：直方图的难点在于x轴上的小区间必须以数据条底部为中心，所以我们需要处理坐标的数据栏。但是，在折线图中，就不需要做这种类似的处理了。在折线图中，数据点的Y坐标为数据的高度坐标，数据点的X坐标为X坐标轴上小区间的X坐标。所以贴现的实现就是在遍历坐标点的同时把线转到这个数据点。绘制虚线绘制虚线的思路是：在遍历数据点的同时，从数据点在Y轴上的高度到lineTo数据点的位置，再到对应的位置lineTo数据点所在的X轴上的小间隔。绘制数据点本文将数据点的样式设置为普通圆点，遍历数据点，将数据点的坐标赋值为圆弧，自定义圆点的半径和颜色。绘制数据的代码如下：//绘制数据drawData(){constel=this.$element('the-canvas');constcontext=el.getContext('2d');让数据=this.option。数据;//数据点坐标letxLength=(this.option.chartZone[2]-this.option.chartZone[0])*0.96;//线段结束后的x轴长度留空letgap=xLength/this.option.xAxisLable.length;//x轴间隙//缓存数据值到坐标距离的比例因子letyFactor=(this.option.chartZone[3]-this.option.chartZone[1])*0.98/this.option.yMaxletactiveX=0;//绘制时记录当前点的坐标letactiveY=0;//绘制时记录当前点的y坐标context.strokeStyle=this.option.lineStyle.color||'#1abc9c';//设置折线的颜色context.lineWidth=this.option.lineStyle.line_width;//设置折线的线宽//绘制折线context.beginPath();context.moveTo(this.option.chartZone[0],this.option.chartZone[3]);//首先将起点移动到0,0坐标for(leti=0;i
