canvas实现价格走执图。

最新推荐文章于 2024-05-17 02:07:51 发布

原创最新推荐文章于 2024-05-17 02:07:51 发布 · 680 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas 走执图

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种利用canvas元素实现自适应最大值最小值显示并保持居中的图表绘制方法，通过JavaScript监听窗口resize事件调整图表尺寸，并在页面加载时自动执行，确保图表始终与页面宽度和高度相匹配，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动适应最大值最小值，永远显示在中间。只要在页中加个canvas 。
</script>

 (function(){
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
            window.addEventListener('resize',function(){
                var data=[{},{"period":"201307","mid_price":"45928"},{"period":"209308","mid_price":"49095"},{"period":"901309","mid_price":"42749"},{"period":"201310","mid_price":"42997"},{"period":"201311","mid_price":"43238"},{"period":"201312","mid_price":"43789"}];
                drawPic("myCanvas",data,'period','mid_price');
            })
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
            var container = document.getElementById("myCanvas");
            container.setAttribute("width",w +"px");
            container.setAttribute("height",h +"px");
            var data=[{},{"period":"201307","mid_price":"45928"},{"period":"209308","mid_price":"49095"},{"period":"901309","mid_price":"42749"},{"period":"201310","mid_price":"42997"},{"period":"201311","mid_price":"43238"},{"period":"201312","mid_price":"43789"}];
            drawPic("myCanvas",data,'period','mid_price');
        })();
        /**
         *
         * @param w canavs width
         * @param h canvas height
         * @param arv data
         */

        function drawPic(id,arv,xkey,ykey){
            var sum = 0,range, w, h,xa,ya,maxY,minY;
            var container = document.getElementById(id);

            //这里可用可不用 begain
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
            container.setAttribute("width",w +"px");
            container.setAttribute("height",h +"px");
            //这里可用可不用 end

            var cxt= container.getContext("2d");
            w = container.offsetWidth;
            h = container.offsetHeight;
            cxt.clearRect(0,0,w,h);
            xa = w/arv.length;
            cxt.fillStyle = "#333";
            cxt.font = "14px Arial";
            cxt.textAlign = "center";
            cxt.strokeStyle =  '#adadad';
            cxt.save();
            cxt.translate(10,h-20);
            cxt.beginPath();
            cxt.moveTo(0,0)
            cxt.lineTo(0,-h);
            cxt.moveTo(0,0);
            cxt.lineTo(w,0);
            for(var i=0;i<arv.length;i++){
                if(arv[i][xkey]){
                    cxt.fillText(arv[i][xkey],i*xa,20)
                    cxt.moveTo(i*xa,0);
                    cxt.lineTo(i*xa,5);
                }
                /**
                 * 以下是数组求最大值最小值。
                 * */
                if(arv[i][ykey]){
                    if(!maxY){
                        maxY=minY =arv[i][ykey]
                    }
                    maxY=arv[i][ykey]>maxY?arv[i][ykey]:maxY;
                    minY=arv[i][ykey]<minY?arv[i][ykey]:minY;
                }
            }
            cxt.closePath();
            cxt.stroke();
            cxt.beginPath();
            //下面是画Y轴部分。
            var dataAvg = maxY -minY;
            ya = h/3;//三等分
            cxt.strokeStyle="#53bd1b";
            cxt.fillStyle = "#53bd1b";
            for(var i=0;i<arv.length;i++){
                if(arv[i][ykey]){
                    var py = -(arv[i][ykey] -minY)*(ya/dataAvg)-ya;
                   // cxt.moveTo(i*xa,py+10);//避免最后一笔连串
                    arv[i].ypos = py+10;
                    if(arv[i-1]&&arv[i-1].ypos){
                        cxt.moveTo((i-1)*xa,arv[i-1].ypos);
                        cxt.lineTo(i*xa,py+10);
                    }
                    cxt.moveTo((i)*xa,py+10);
                    cxt.arc((i)*xa,py+10,3, 0, Math.PI * 2, true)
                    cxt.fill();
                    cxt.fillText(arv[i][ykey],i*xa,py)
                }
            }
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
        }

欢迎拍砖。