js 手工繪制一個(gè)圖表（自定義chart），

Achilles 發(fā)布于2019-08-30 14:11 / 3027人閱讀

摘要：最終效果說(shuō)明一提到圖表第一反應(yīng)就是，但是這次需求不一樣，就要求展示一個(gè)簡(jiǎn)單的折線(xiàn)圖，沒(méi)必要搞那么大。簡(jiǎn)單的用了一下的基礎(chǔ)的那幾個(gè)函數(shù)就實(shí)現(xiàn)了。我認(rèn)為只要沿著這條思路走，就可以繪制出你想要的任何圖表。

1、最終效果

2、說(shuō)明
一提到圖表第一反應(yīng)就是echart，但是這次需求不一樣，就要求展示一個(gè)簡(jiǎn)單的折線(xiàn)圖，沒(méi)必要搞那么大。決定canvas走起。這里展示一下思路，代碼也比較簡(jiǎn)單，如果需要，歡迎加入我的qq群點(diǎn)此入群，或者438863673
3、上代碼

new Vue({
            el:".container",
            data (){
                return {
                    yuce:[30,40,24,23,45,18,16,24,12,33,42,20,10, 20, 24, 23, 45, 25, 22, 24, 12, 33,31, 20,36]
                }
            },
            mounted () {
                var c = document.getElementById("ctx");
                var ctx = c.getContext("2d");
                ctx.strokeStyle = "rgba(255,255,255,0.1)";
                ctx.width= 2410;
                ctx.height= 100;
                ctx.font = "";
                var width = 100;
                var i = 0;
                ctx.moveTo(0,60- this.yuce[0]);
               do{
                    ctx.lineTo(width, 60-this.yuce[i+1]);
                    ctx.fillStyle = "#aaa"
                    ctx.fillText(i+"°/88%", width-65, 60 - (this.yuce[i]+ this.yuce[i+1])/2);
                    i++;
                    width = width + 100
                } while (i <24)
                ctx.lineTo(2400, 80);
                ctx.lineTo(0, 80);
                ctx.lineTo(0, 60 - this.yuce[0]);
                ctx.fillStyle = "rgba(100, 150, 185, 0.5)";
                ctx.strokeStyle = "rgba(47, 161, 255, 1)";
                ctx.width=1;
                ctx.fill();
                ctx.stroke(); 
            } 
        })

4、代碼分析
上面的代碼是繪制線(xiàn)框所需要的,因?yàn)閿?shù)據(jù)比較長(zhǎng)所以設(shè)置了橫向可滑動(dòng)。簡(jiǎn)單的用了一下canvas的基礎(chǔ)的那幾個(gè)函數(shù)就實(shí)現(xiàn)了。我認(rèn)為只要沿著這條思路走，就可以繪制出你想要的任何圖表。代碼是vue項(xiàng)目里copy出來(lái)。思路簡(jiǎn)單，應(yīng)該都看得懂。