#过年不停更#OpenHarmony-JS封装canvas之折线图原创精华

深开鸿

发布于 2022-2-17 11:25

浏览

5收藏

已被收录在 2 个专栏，

前言

我们已经在之前实现了简易的柱状图，那么同理，我们该如何运用鸿蒙Jacascript实现简易的折线图呢？

折线图

我们在讲柱状图时，已经详细的描述了如何绘制我们的坐标轴，折线图的坐标轴与柱状图坐标轴的绘制方法几乎相同，所以在本文我们将不会讨论。关于坐标轴绘制的讲解与箭头绘制的讲解，大家可以查看上一期的柱状图绘制：

我们非常希望读者可以完全读懂柱状图的这一期文章，因为在折线图的绘制中使用到的坐标点，都在该篇文章中详细的解释过。

坐标轴的绘制

与柱状图类似，我们首先定义出绘制折线图时，我们将用到的数据：

obj:{
    chartZone: [],   //图表左上角与右下角坐标数组
    yAxisLable: [],  //Y轴内容
    yMax: 0, //Y轴最大值
    guideLine:true, //是否存在辅助线
    dataPoint: true, //是否存在数据点
    xAxisLable: [], //x轴内容
    data: [], //数据内容
    lineStyle:{
        line_width: 0,  //数据条的宽
        color: '#1abc9c',  //折线的颜色
        radius: 0 //数据点半径
    },
    axisArrow:{
        size:'2',    //箭头因子大小
        color:'red'    //箭头填充色
    }，
    dataStyle:{
                radius: 5,
                color:"#ee6587"
    }

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

我们绘制折线图的总函数也与柱状图的绘制函数相同：

draw() {
        this.drawAxis()
        this.drawYLables()
        this.drawXLables()
        this.drawData()
        this.drawArrow()
        this.drawArrowY()
    },
1.
2.
3.
4.
5.
6.
7.
8.

再次给出绘制坐标轴与坐标轴上内容的代码：

 //绘制X，Y坐标轴
    drawAxis() {
        let chartZone = this.option.chartZone
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        context.save()
        context.lineWidth = 2
        context.strokeStyle = '#353535'
        context.beginPath()
        context.moveTo(chartZone[0], chartZone[1])
        context.lineTo(chartZone[0], chartZone[3])
        context.lineTo(chartZone[2], chartZone[3])
        context.stroke()
    },
    //绘制y轴坐标
    drawYLables() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        context.save()
        let labels = this.option.yAxisLable;
        let yLength = (this.option.chartZone[3] - this.option.chartZone[1]) * 0.98
        let gap = yLength / (labels.length - 1)
        let option = this.option
        labels.forEach(function (label, index) {
            //绘制坐标文字
            //offset为y轴上数据与y轴的距离
            let offset = context.measureText(label).width + 20
            context.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() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let labels = this.option.xAxisLable;
        let xLength = (this.option.chartZone[2] - this.option.chartZone[0]) * 0.96
        let gap = xLength / (labels.length)
        let option = this.option
        labels.forEach(function (label, index) {
            //绘制坐标文字
            let offset = context.measureText(label).width
            context.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
        })
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.

数据的绘制

接下来我们进入重点：绘制数据。绘制数据将由三个模块组成：绘制折线，绘制虚线辅助线，绘制数据点。

其实，为了便于理解，我们应该先弄明白数据点的坐标，再思考如何绘制折线与虚线，但是在canvas中，先绘制的内容会被压在最底层，而后绘制的内容则会出现在最上层，所以我们绘制的顺序应该为：折线，虚线，数据点。

绘制折线

折线图的绘制实际上要比柱状图简单：柱状图的难点在于x轴上的小间隔要居中于数据条的底部，我们需要因此对数据条的坐标做处理，然而在折线图中则不需要做这种类似的处理，在折线图中，数据点的Y坐标即为数据的高度坐标，数据点的X坐标即为X坐标轴上小间隔的X坐标。所以折现的实现，就是在遍历坐标点的同时，将线lineTo到这个数据点。

#过年不停更#OpenHarmony-JS封装canvas之折线图-鸿蒙开发者社区

绘制虚线

绘制虚线的思路则为：在遍历数据点的同时，从Y轴上数据点的高度所在位置lineTo数据点所在的位置，再lineTo数据点所在X轴上对应的小间隔所在的位置。

#过年不停更#OpenHarmony-JS封装canvas之折线图-鸿蒙开发者社区

绘制数据点

本篇文章将数据点的样式设置为普通的圆点，遍历数据点，将数据点的坐标赋值给arc，并自定义圆点的半径大小与颜色。

#过年不停更#OpenHarmony-JS封装canvas之折线图-鸿蒙开发者社区

数据绘制的代码如下所示：

//绘制数据
    drawData() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let data = this.option.data; //数据点坐标
        let xLength = (this.option.chartZone[2] - this.option.chartZone[0]) * 0.96; //线段尾部留白后x轴长
        let gap = xLength / this.option.xAxisLable.length; //x轴间隙
        //缓存从数据值到坐标距离的比例因子
        let yFactor = (this.option.chartZone[3] - this.option.chartZone[1]) * 0.98 / this.option.yMax
        let activeX = 0; //记录绘制过程中当前点的坐标
        let activeY = 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 (let i = 0; i < data.length; i++) {
            activeX = this.option.chartZone[0] + (i + 1) * gap;
            activeY = this.option.chartZone[3] - data[i] * yFactor;
            context.lineTo(activeX, activeY);
            context.stroke();
        }
        context.restore()


        //绘制数据点辅助虚线
        context.strokeStyle = '#a29d9d'
        context.setLineDash([10, 20])
        context.beginPath()
        if (this.option.guideLine == true) {
            for (let i = 0; i < data.length; i++) {
                context.moveTo(this.option.chartZone[0], this.option.chartZone[3] - data[i] * yFactor)
                activeX = this.option.chartZone[0] + (i + 1) * gap;
                activeY = this.option.chartZone[3] - data[i] * yFactor;
                context.lineTo(activeX, activeY)
                context.lineTo(activeX, this.option.chartZone[3])
                context.lineTo(activeX, this.option.chartZone[3])
                context.stroke()
            }
        }
        //绘制数据
        if (this.option.dataPoint == true) {
            for (let i = 0; i < data.length; i++) {
                activeX = this.option.chartZone[0] + (i + 1) * gap;
                activeY = this.option.chartZone[3] - data[i] * yFactor;
                context.fillStyle = this.option.dataStyle.color
                context.beginPath()
                context.arc(activeX, activeY, this.option.dataStyle.radius, 0, 2 * Math.PI, false)
                context.fill()
                context.closePath()
            }
        }
        context.restore()
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.

箭头的绘制

我们照例给出箭头函数的代码。

    drawArrow() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let factor = this.option.axisArrow.size;
        context.save()
        //        context.translate(this.option.chartZone[2], this.option.chartZone[3])
        context.beginPath()
        context.moveTo(this.option.chartZone[2], this.option.chartZone[3])
        context.lineTo(this.option.chartZone[2] + 2 * factor, this.option.chartZone[3] - 3 * factor)
        context.lineTo(this.option.chartZone[2] + 10 * factor, this.option.chartZone[3])
        context.lineTo(this.option.chartZone[2] + 2 * factor, this.option.chartZone[3] + 3 * factor)
        context.lineTo(this.option.chartZone[2], this.option.chartZone[3])
        context.globalAlpha = 0.7
        context.fillStyle = this.option.axisArrow.color
        context.fill()
        context.restore()
    },
    drawArrowY() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let factor = this.option.axisArrow.size;
        context.save()
        context.beginPath()
        context.moveTo(this.option.chartZone[0], this.option.chartZone[1])
        context.lineTo(this.option.chartZone[0] - 3 * factor, this.option.chartZone[1] - 2 * factor)
        context.lineTo(this.option.chartZone[0], this.option.chartZone[1] - 10 * factor)
        context.lineTo(this.option.chartZone[0] + 3 * factor, this.option.chartZone[1] - 2 * factor)
        context.lineTo(this.option.chartZone[0], this.option.chartZone[1])
        context.globalAlpha = 0.7
        context.fillStyle = this.option.axisArrow.color
        context.fill()
        context.restore()
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

总结

以上就实现了折线图的基本功能，我们完全可以直接将绘制折线的函数放到柱状图的组件中实现折线图与柱状图共存的图表，以满足特定的需求。我们应该要思考的点在于：如何实现折线图的hover效果？如何使用贝塞尔曲线来实现平滑的折线呢？希望大家可以一起积极的讨论。

更多原创内容请关注：深开鸿技术团队

入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2022-2-25 09:59:47修改

4条回复

按时间正序

按时间倒序

红叶亦知秋

蹲一个大佬来解答下如何用贝塞尔曲线来实现平滑的折线。

2022-2-17 13:49:33

業

666

2022-2-17 14:23:57

66666666666

2022-2-17 14:49:40

wx620ce9122ae16

666

2022-2-17 17:00:10

51CTO

51CTO博客

51CTO学堂

#过年不停更#OpenHarmony-JS封装canvas之折线图原创精华

前言

折线图

坐标轴的绘制

数据的绘制

绘制折线

绘制虚线

绘制数据点

箭头的绘制

总结

更多原创内容请关注：深开鸿技术团队

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#过年不停更#OpenHarmony-JS封装canvas之折线图 原创 精华

前言

折线图

坐标轴的绘制

数据的绘制

绘制折线

绘制虚线

绘制数据点

箭头的绘制

总结

更多原创内容请关注：深开鸿技术团队

目录

订阅鸿蒙技术特刊，精选内容抢先看

#过年不停更#OpenHarmony-JS封装canvas之折线图原创精华