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

SnaiLiu 發(fā)布于2019-08-22 15:33 / 2153人閱讀

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

1、最終效果

2、說明
一提到圖表第一反應就是echart，但是這次需求不一樣，就要求展示一個簡單的折線圖，沒必要搞那么大。決定canvas走起。這里展示一下思路，代碼也比較簡單，如果需要，歡迎加入我的qq群點此入群，或者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、代碼分析
上面的代碼是繪制線框所需要的,因為數(shù)據(jù)比較長所以設置了橫向可滑動。簡單的用了一下canvas的基礎的那幾個函數(shù)就實現(xiàn)了。我認為只要沿著這條思路走，就可以繪制出你想要的任何圖表。代碼是vue項目里copy出來。思路簡單，應該都看得懂。

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93542.html

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

摘要：最終效果說明一提到圖表第一反應就是，但是這次需求不一樣，就要求展示一個簡單的折線圖，沒必要搞那么大。簡單的用了一下的基礎的那幾個函數(shù)就實現(xiàn)了。我認為只要沿著這條思路走，就可以繪制出你想要的任何圖表。 1、最終效果showImg(https://segmentfault.com/img/bV6j5f?w=384&h=203); 2、說明一提到圖表第一反應就是echart，但是這次需求不一...

Achilles 2019-08-30 14:11 評論0 收藏0
前端開發(fā)者常用的9個JavaScript圖表庫

摘要：使用來呈現(xiàn)圖表。允許用戶在應用程序中創(chuàng)建美觀的可復用的圖表。它是基于創(chuàng)建的，是一個以數(shù)據(jù)為中心的圖表庫，可以改進數(shù)據(jù)可視化的效果。非常輕巧，并使用元素來創(chuàng)建很奇特的圖表。是庫中較為古老的圖表庫之一。總結以上介紹的庫都是高質量的圖表庫。當前，數(shù)據(jù)可視化已經(jīng)成為數(shù)據(jù)科學領域非常重要的一部分。不同網(wǎng)絡系統(tǒng)中產(chǎn)生的數(shù)據(jù)，都需要經(jīng)過適當?shù)目梢暬幚恚员愀玫某尸F(xiàn)給用戶讀取和分析。對任何一個...

luck 2019-08-22 11:21 評論0 收藏0
螞蟻金服新一代數(shù)據(jù)可視化引擎 G2

摘要：新公司已經(jīng)呆了一個多月，目前著手一個數(shù)據(jù)可視化的項目，數(shù)據(jù)可視化肯定要用到圖形庫如等，經(jīng)決定我的這個項目用阿里旗下螞蟻金服所開發(fā)的圖表庫。數(shù)據(jù)提示框內(nèi)提示的信息還可以通過格式化函數(shù)動態(tài)指定。新公司已經(jīng)呆了一個多月，目前著手一個數(shù)據(jù)可視化的項目，數(shù)據(jù)可視化肯定要用到圖形庫如D3、Highcharts、ECharts、Chart等，經(jīng)決定我的這個項目用阿里旗下螞蟻金服所開發(fā)的G2圖表庫。...

animabear 2019-08-20 16:32 評論0 收藏0
chart.js 中文文檔翻譯

摘要：高亮最近的元素高亮同樣值的數(shù)據(jù)高亮所有的數(shù)據(jù)原色，當鼠標懸浮到塊是值被選中。關鍵字代表的是從構造函數(shù)創(chuàng)建的對象。高亮最近的數(shù)據(jù)懸浮時動畫執(zhí)行的時間，單位，毫秒調(diào)用被觸發(fā)的任何事件動畫設置以下動畫設置都可生效，全局設置在中定義。 chart.js Configuration文檔翻譯 tags: chart 文檔翻譯 [TOC] Getting start開始下載 github上獲得最...

y1chuan 2019-08-20 14:38 評論0 收藏0