【带着canvas去流浪】（2）绘制折线图

时间：2023-03-08 22:13:45

【带着canvas去流浪】（2）绘制折线图

示例代码托管在：https://github.com/dashnowords/blogs/tree/master/Demo/canvas-echarts/line-chart

博客园地址：《大史住在大前端》原创博文目录

华为云社区地址：【你要的前端打怪升级指南】

一. 任务说明

使用原生canvasAPI绘制折线图。（柱状图截图来自于百度Echarts官方示例库【查看示例链接】。

【带着canvas去流浪】（2）绘制折线图

二. 重点提示

一般折线图是比较好实现的，只需要调用最基本的moveTo()和lineTo( )方法来绘制即可。平滑折线图是一个难点，需要借助贝塞尔曲线来进行绘制，此时每段曲线的控制点算法就成了核心难点，对原理感兴趣的读者可以自行研究，本文直接利用算法的结论来进行实现。

上一节中为了以文字中点为参考，在绘制x轴文字时采用的方法是用measureText( )方法测量文字的宽度，然后偏移该距离的一半来达到效果，事实上我们可以通过设置textAlign属性为'center'来达到以文字宽度方向中线为参考点的绘制。

context.textAlign = 'center';

context.drawText('Hello world',x ,y);

三. 示例代码

坐标轴及绘图参数设置请直接参见【带着canvas去流浪】（1）绘制柱状图或在示例demo中查看。

3.1 一般折线图

折线图数据绘制示例代码：

/**

 * 绘制数据

 */

function drawData(options) {

    let data = options.data;//数据点坐标

    let xLength = (options.chartZone[2] - options.chartZone[0])*0.96;//线段尾部留白后x轴长

    let yLength = (options.chartZone[3] - options.chartZone[1])*0.98;//线段尾部留白后y轴长

    let gap = xLength / options.xAxisLabel.length;//x轴间隙

    //缓存从数据值到坐标距离的比例因子

    let yFactor =(options.chartZone[3] - options.chartZone[1]) *0.98  /  options.yMax

    let activeX =  0;//记录绘制过程中当前点的坐标

    let activeY =  0;//记录绘制过程中当前点的y坐标

    context.strokeStyle = options.barStyle.color || '#1abc9c'; //02BAD4

    context.strokeWidth = 2;

    context.beginPath();

    context.moveTo(options.chartZone[0],options.chartZone[3]);//先将起点移动至0,0坐标

    for(let i = 0; i < data.length; i++){

        activeX = options.chartZone[0] + (i + 1) * gap;

        activeY = options.chartZone[3] - data[i] * yFactor;

        context.lineTo(activeX, activeY);

     }

     context.stroke();

    }

浏览器中可查看效果：

【带着canvas去流浪】（2）绘制折线图

3.2 用贝塞尔曲线绘制平滑折线图

一般折线图连接点部分非常生硬，更多的场景下我们更希望曲线相对平滑，这时候就需要用到贝塞尔曲线来进行绘制，关于控制点的确定可参考文章【怎样确定贝塞尔曲线的控制点】。

相关文章