如何從零繪製k線圖 -- 原生js canvas圖表繪製

時間 2019-12-16

標籤如何繪製線圖原生 canvas 圖表欄目 JavaScript 简体版

原文原文鏈接

樣式以下圖javascript

源碼地址： https://github.com/sutianbinde/chartshtml

演示地址：kchart.htmljava

編寫這個須要具有canvas基礎，若是沒有canvas基礎能夠學習我前面的cnavas基礎博客。 git

具體步驟github

建立html文件，而後咱們在頁面中寫一個用於放圖表的 divcanvas

而後在js中寫入數據，和繪製圖表的方法（數據是一個三維數組，每個k點值中包含了日期還包含了一個表示開盤/收盤/最低/最高值的數組）數組

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
    <div id="chart" height="500" width="1200" style="margin:30px;"></div>
    
    <script type="text/javascript">
        function goChart(cBox, dataArr){
            
        }

        // 時間  開盤 收盤 最低 最高
        var dataArr = [
            ["2017/10/1", [2320.26,2302.6,2287.3,2362.94]], 
            ["2017/10/2", [2300,2291.3,2288.26,2308.38]], 
            ["2017/10/3", [2295.35,2346.5,2295.35,2346.92]], 
            ["2017/10/4", [2347.22,2358.98,2337.35,2363.8]], 
            ["2017/10/5", [2360.75,2382.48,2347.89,2383.76]], 
            ["2017/10/6", [2383.43,2385.42,2371.23,2391.82]], 
            ["2017/10/7", [2377.41,2419.02,2369.57,2421.15]], 
            ["2017/10/8", [2425.92,2428.15,2417.58,2440.38]],
            ["2017/10/9", [2411,2433.13,2403.3,2437.42]],
            ["2017/10/10", [2432.68,2434.48,2427.7,2441.73]],
            ["2017/10/11", [2430.69,2418.53,2394.22,2433.89]],
            ["2017/10/12", [2416.62,2432.4,2414.4,2443.03]],
            ["2017/10/13", [2441.91,2421.56,2415.43,2444.8]],
            ["2017/10/14", [2420.26,2382.91,2373.53,2427.07]],
            ["2017/10/15", [2383.49,2397.18,2370.61,2397.94]],
            ["2017/10/16", [2378.82,2325.95,2309.17,2378.82]],
            ["2017/10/17", [2322.94,2314.16,2308.76,2330.88]],
            ["2017/10/18", [2320.62,2325.82,2315.01,2338.78]],
            ["2017/10/19", [2313.74,2293.34,2289.89,2340.71]],
            ["2017/10/20", [2297.77,2313.22,2292.03,2324.63]],
            ["2017/10/21", [2322.32,2365.59,2308.92,2366.16]],
            ["2017/10/22", [2364.54,2359.51,2330.86,2369.65]],
            ["2017/10/23", [2332.08,2273.4,2259.25,2333.54]],
            ["2017/10/24", [2274.81,2326.31,2270.1,2328.14]],
            ["2017/10/25", [2333.61,2347.18,2321.6,2351.44]],
            ["2017/10/26", [2340.44,2324.29,2304.27,2352.02]],
            ["2017/10/27", [2326.42,2318.61,2314.59,2333.67]],
            ["2017/10/28", [2314.68,2310.59,2296.58,2320.96]],
            ["2017/10/29", [2309.16,2286.6,2264.83,2333.29]],
            ["2017/10/30", [2282.17,2263.97,2253.25,2286.33]], 
            ["2017/11/1", [2320.26,2302.6,2287.3,2362.94]],
            ["2017/11/2", [2300,2291.3,2288.26,2308.38]], 
            ["2017/11/3", [2295.35,2346.5,2295.35,2346.92]], 
            ["2017/11/4", [2347.22,2358.98,2337.35,2363.8]], 
            ["2017/11/5", [2360.75,2382.48,2347.89,2383.76]], 
            ["2017/11/6", [2383.43,2385.42,2371.23,2391.82]], 
            ["2017/11/7", [2377.41,2419.02,2369.57,2421.15]], 
            ["2017/11/8", [2425.92,2428.15,2417.58,2440.38]],
            ["2017/11/9", [2411,2433.13,2403.3,2437.42]],
            ["2017/11/10", [2432.68,2434.48,2427.7,2441.73]],
            ["2017/11/11", [2430.69,2418.53,2394.22,2433.89]],
            ["2017/11/12", [2416.62,2432.4,2414.4,2443.03]],
            ["2017/11/13", [2441.91,2421.56,2415.43,2444.8]],
            ["2017/11/14", [2420.26,2382.91,2373.53,2427.07]],
            ["2017/11/15", [2383.49,2397.18,2370.61,2397.94]],
            ["2017/11/16", [2378.82,2325.95,2309.17,2378.82]],
            ["2017/11/17", [2322.94,2314.16,2308.76,2330.88]],
            ["2017/11/18", [2320.62,2325.82,2315.01,2338.78]],
            ["2017/11/19", [2313.74,2293.34,2289.89,2340.71]],
            ["2017/11/20", [2297.77,2313.22,2292.03,2324.63]],
            ["2017/11/21", [2322.32,2365.59,2308.92,2366.16]],
            ["2017/11/22", [2364.54,2359.51,2330.86,2369.65]],
            ["2017/11/23", [2332.08,2273.4,2259.25,2333.54]],
            ["2017/11/24", [2274.81,2326.31,2270.1,2328.14]],
            ["2017/11/25", [2333.61,2347.18,2321.6,2351.44]],
            ["2017/11/26", [2340.44,2324.29,2304.27,2352.02]],
            ["2017/11/27", [2326.42,2318.61,2314.59,2333.67]],
            ["2017/11/28", [2314.68,2310.59,2296.58,2320.96]],
            ["2017/11/29", [2309.16,2286.6,2264.83,2333.29]],
            ["2017/11/30", [2282.17,2263.97,2253.25,2286.33]]
        ];
        
        goChart(document.getElementById("chart"),dataArr);

    </script>
</body>
</html>

申明須要的變量，而且初始化圖表（js寫在 goChart方法中）瀏覽器

全部變量的同樣我已經在註釋中註明，你們先不用特別理解，到後面用到的時候就知道了app

            // 聲明所需變量 
            var canvas,ctx;  //canvas DOM    canvas上下文
            // 圖表屬性
            var cWidth, cHeight, cMargin, cSpace;  //canvas中部的寬/高  canvas內邊距/文字邊距
            var originX, originY; //座標軸原點
            // 圖屬性
            var bMargin, tobalBars, bWidth, maxValue, minValue;  //每一個k線圖間間距  數量 寬度   全部k線圖的最大值/最小值 
            var totalYNomber;  //y軸上的標識數量
            var showArr;       //顯示出來的數據部分（由於能夠選擇範圍，因此須要這個數據）
            
            //範圍選擇屬性
            var dragBarX,dragBarWidth; //範圍選擇條中的調節按鈕的位置，寬度

            // 運動相關變量
            var ctr, numctr, speed;    //運動的起步，共有多少步，運動速度（timer的時間）
            //鼠標移動
            var mousePosition = {};     //用戶存放鼠標位置

            // 建立canvas並得到canvas上下文
               canvas = document.createElement("canvas");
               if(canvas && canvas.getContext){
                ctx = canvas.getContext("2d");
            }
               
               canvas.innerHTML = "你的瀏覽器不支持HTML5 canvas";
               cBox.appendChild(canvas);
            
            initChart(); // 圖表初始化
            
            // 圖表初始化
            function initChart(){
                // 圖表信息
                cMargin = 60;
                cSpace = 80;
                //將canvas擴大2倍，而後縮小，以適應高清屏幕
                canvas.width = cBox.getAttribute("width")* 2 ;
                canvas.height = cBox.getAttribute("height")* 2;
                canvas.style.height = canvas.height/2 + "px";
                canvas.style.width = canvas.width/2 + "px";
                cHeight = canvas.height - cMargin*2-cSpace*2;
                cWidth = canvas.width - cMargin*2-cSpace*2;
                originX = cMargin + cSpace;
                originY = cMargin + cHeight;
                
                showArr = dataArr.slice( 0,parseInt(dataArr.length/2) );

                // 柱狀圖信息
                tobalBars = showArr.length;
                bWidth = parseInt( cWidth/tobalBars/3);
                bMargin = parseInt( (cWidth-bWidth*tobalBars)/(tobalBars+1) );
                //算最大值，最小值
                maxValue = 0;
                minValue = 9999999;
                for(var i=0; i<dataArr.length; i++){
                    var barVal =  dataArr[i][1][3] ;
                    if( barVal > maxValue ){
                        maxValue = barVal;
                    }
                    var barVal2 =  dataArr[i][1][2] ;
                    if( barVal2 < minValue ){
                        minValue = barVal2;
                    }
                    
                }
                maxValue += 20; //上面預留20的空間
                minValue -= 20; //下面預留20的空間
                totalYNomber = 10;
                // 運動相關
                ctr = 1;
                numctr = 50;
                speed = 2;
                
                dragBarWidth = 30;
                dragBarX = cWidth/2+cSpace+cMargin-dragBarWidth/2;

            }

接着上一步的代碼 繪製座標軸和標記學習

            drawLineLabelMarkers(); // 繪製圖表軸、標籤和標記
            // 繪製圖表軸、標籤和標記
            function drawLineLabelMarkers(){
                ctx.font = "24px Arial";
                ctx.lineWidth = 2;
                ctx.fillStyle = "#000";
                ctx.strokeStyle = "#000";
                // y軸
                drawLine(originX, originY, originX, cMargin);
                // x軸
                drawLine(originX, originY, originX+cWidth, originY);

                // 繪製標記
                drawMarkers();
            }

            // 畫線的方法
            function drawLine(x, y, X, Y){
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(X, Y);
                ctx.stroke();
                ctx.closePath();
            }

            // 繪製標記
            function drawMarkers(){
                ctx.strokeStyle = "#E0E0E0";
                // 繪製 y
                var oneVal = (maxValue-minValue)/totalYNomber;
                ctx.textAlign = "right";
                for(var i=0; i<=totalYNomber; i++){
                    var markerVal =  parseInt(i*oneVal+minValue);;
                    var xMarker = originX-10;
                    var yMarker = parseInt( originY-cHeight*(markerVal-minValue)/(maxValue-minValue) );
                    
                    ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 文字
                    if(i>0){
                        drawLine(originX+2, yMarker, originX+cWidth, yMarker);
                    }
                }
                
                // 繪製 x
                var textNb = 6;
                ctx.textAlign = "center";
                for(var i=0; i<tobalBars; i++){
                    if(tobalBars>textNb &&  i%parseInt(tobalBars/6) != 0 ){
                        continue;
                    }
                    var markerVal = dataArr[i][0];
                    var xMarker = parseInt( originX+cWidth*(i/tobalBars)+bMargin+bWidth/2 );
                    var yMarker = originY+30;
                    ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
                }
                // 繪製標題 y
                ctx.save();
                ctx.rotate(-Math.PI/2);
                ctx.fillText("指 數", -canvas.height/2, cSpace-20);
                ctx.restore();
                // 繪製標題 x
                ctx.fillText("日 期", originX+cWidth/2, originY+cSpace-20);
            };

接着繪製中間的K圖柱子

這裏的代碼中包含了後面鼠標移動和調節範圍的判斷代碼，如今還看不到其做用

            drawBarAnimate(); // 繪製柱狀圖的動畫
            //繪製k形圖
            function drawBarAnimate(mouseMove){
                var parsent = ctr/numctr;
                for(var i=0; i<tobalBars; i++){
                    var oneVal = parseInt(maxValue/totalYNomber);
                    var data = dataArr[i][1];
                    var color = "#30C7C9";
                    var barVal = data[0];
                    var disY = 0;
                    //開盤0 收盤1 最低2 最高3   跌30C7C9  漲D7797F
                    if(data[1]>data[0]){ //漲
                        color = "#D7797F";
                        barVal = data[1];
                        disY = data[1]-data[0];
                    }else{
                        disY = data[0]-data[1];
                    }
                    var showH = disY/(maxValue-minValue)*cHeight*parsent;
                    showH = showH>2 ? showH : 2 ;
                    
                    var barH = parseInt( cHeight*(barVal-minValue)/(maxValue-minValue));
                    var y = originY - barH;
                    var x = originX + ((bWidth+bMargin)*i + bMargin)*parsent;
                    
                    drawRect( x, y, bWidth, showH, mouseMove, color,true);  //開盤收盤  高度減一避免蓋住x軸
                    
                    //最高最低的線
                    showH = (data[3]-data[2])/(maxValue-minValue)*cHeight*parsent;
                    showH = showH>2 ? showH : 2 ;
                    
                    y = originY - parseInt( cHeight*(data[3]-minValue)/(maxValue-minValue));
                    drawRect( parseInt(x+bWidth/2-1), y, 2, showH, mouseMove, color);  //最高最低  高度減一避免蓋住x軸
                }
                if(ctr<numctr){
                    ctr++;
                    setTimeout(function(){
                        ctx.clearRect(0,0,canvas.width, canvas.height);
                        drawLineLabelMarkers();
                        drawBarAnimate();
                        drawDragBar();
                    }, speed*=0.03);
                }
            }

            //繪製方塊
            function drawRect( x, y, X, Y, mouseMove , color, ifBigBar,ifDrag){

                ctx.beginPath();
                
                if( parseInt(x)%2 !== 0){  //避免基數像素在普通分辨率屏幕上出現方塊模糊的狀況
                    x += 1;
                }
                if( parseInt(y)%2 !== 0){
                    y += 1;
                }if( parseInt(X)%2 !== 0){
                    X += 1;
                }
                if( parseInt(Y)%2 !== 0){
                    Y += 1;
                }
                ctx.rect( parseInt(x), parseInt(y), parseInt(X), parseInt(Y) );
                
                if(ifBigBar && mouseMove && ctx.isPointInPath(mousePosition.x*2, mousePosition.y*2)){ //若是是鼠標移動的到柱狀圖上，從新繪製圖表
                    ctx.strokeStyle = color;
                    ctx.strokeWidth = 20;
                    ctx.stroke();
                }
                //若是移動到拖動選擇範圍按鈕
                canvas.style.cursor = "default";
                if(ifDrag && ctx.isPointInPath(mousePosition.x*2, mousePosition.y*2)){ //若是是鼠標移動的到調節範圍按鈕上，改變鼠標樣式
                    //console.log(123);
                    canvas.style.cursor = "all-scroll";
                }
                ctx.fillStyle = color;
                ctx.fill();
                ctx.closePath();

            }

接着繪製選擇範圍的矩形

            //繪製拖動軸
            drawDragBar();
            function drawDragBar(){
                drawRect( originX, originY+cSpace, cWidth, cMargin, false, "#E8E4F0");
                drawRect( originX, originY+cSpace, dragBarX-originX, cMargin, false, "#BCCEF5");
                drawRect( dragBarX, originY+cSpace, dragBarWidth, cMargin, false, "#078ACB",false,true);
            }

這樣咱們的圖表基本繪製就完成了

而後監聽鼠標移動和拖動選擇顯示範圍

            //檢測鼠標移動
            var mouseTimer = null;
            addMouseMove();
            function addMouseMove(){
                canvas.addEventListener("mousemove",function(e){
                    e = e || window.event;
                    if( e.offsetX || e.offsetX==0 ){
                        mousePosition.x = e.offsetX;
                        mousePosition.y = e.offsetY;
                    }else if( e.layerX || e.layerX==0 ){
                        mousePosition.x = e.layerX;
                        mousePosition.y = e.layerY;
                    }
                    
                    clearTimeout(mouseTimer);
                    mouseTimer = setTimeout(function(){
                        ctx.clearRect(0,0,canvas.width, canvas.height);
                        drawLineLabelMarkers();
                        drawBarAnimate(true);
                        drawDragBar();
                    },10);
                });
            }
            //監聽拖拽
            canvas.onmousedown = function(e){
                
                if(canvas.style.cursor != "all-scroll"){
                    return false;
                }
                
                document.onmousemove = function(e){
                    e = e || window.event;
                    if( e.offsetX || e.offsetX==0 ){
                        dragBarX = e.offsetX*2-dragBarWidth/2;
                    }else if( e.layerX || e.layerX==0 ){
                        dragBarX = e.layerX*2-dragBarWidth/2;
                    }
                    
                    if(dragBarX<=originX){
                        dragBarX=originX
                    }
                    if(dragBarX>originX+cWidth-dragBarWidth){
                        dragBarX=originX+cWidth-dragBarWidth
                    }
                    
                    var nb = Math.ceil( dataArr.length*( (dragBarX-cMargin-cSpace)/cWidth ) );
                    showArr = dataArr.slice( 0, nb || 1 );

                    // 柱狀圖信息
                    tobalBars = showArr.length;
                    bWidth = parseInt( cWidth/tobalBars/3);
                    bMargin = parseInt( (cWidth-bWidth*tobalBars)/(tobalBars+1) );
                    
                    
                }
                
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }

這樣整個代碼就編寫完了，感興趣的同窗但願手動實現上面的代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。