canvas-----画柱状图（bar）

最新推荐文章于 2023-12-27 00:25:20 发布

qq_36587340

最新推荐文章于 2023-12-27 00:25:20 发布

阅读量316

点赞数

分类专栏： html+css javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_36587340/article/details/127845569

版权

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

html+css

13 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用HTML5 Canvas绘制一个带有动画效果的柱状图。通过JavaScript函数`goBarChart`，它接收数据数组，初始化图表，绘制图表轴、标签和标记，并实现柱状图的动画绘制。鼠标移动和点击事件被监听，以更新和刷新图表。博客内容涵盖了柱状图的渐变颜色、动态加载和交互功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="barChart" height="400" width="600" style="margin:50px"> 你的浏览器不支持HTML5 canvas </canvas>

    <script type="text/javascript">
        function goBarChart(dataArr){
            // 声明所需变量
            var canvas,ctx;
            // 图表属性
            var cWidth, cHeight, cMargin, cSpace;
            var originX, originY;
            // 柱状图属性
            var bMargin, tobalBars, bWidth, maxValue;
            var totalYNomber;
            var gradient;

            // 运动相关变量
            var ctr, numctr, speed;
            //鼠标移动
            var mousePosition = {};

            // 获得canvas上下文
            canvas = document.getElementById("barChart");
            if(canvas && canvas.getContext){
                ctx = canvas.getContext("2d");
            }
            initChart(); // 图表初始化
            drawLineLabelMarkers(); // 绘制图表轴、标签和标记
            drawBarAnimate(); // 绘制柱状图的动画
            //检测鼠标移动
            var mouseTimer = null;
            canvas.addEventListener("mousemove",function(e){
                e = e || window.event;
                if( e.layerX || e.layerX==0 ){
                    mousePosition.x = e.layerX;
                    mousePosition.y = e.layerY;
                }else if( e.offsetX || e.offsetX==0 ){
                    mousePosition.x = e.offsetX;
                    mousePosition.y = e.offsetY;
                }
                
                clearTimeout(mouseTimer);
                mouseTimer = setTimeout(function(){
                    ctx.clearRect(0,0,canvas.width, canvas.height);
                    drawLineLabelMarkers();
                    drawBarAnimate(true);
                },10);
            });

            //点击刷新图表
            canvas.onclick = function(){
                initChart(); // 图表初始化
                drawLineLabelMarkers(); // 绘制图表轴、标签和标记
                drawBarAnimate(); // 绘制折线图的动画
            };


            // 图表初始化
            function initChart(){
                // 图表信息
                cMargin = 30;
                cSpace = 60;
                cHeight = canvas.height - cMargin*2 - cSpace;
                cWidth = canvas.width - cMargin*2 - cSpace;
                originX = cMargin + cSpace;
                originY = cMargin + cHeight;

                // 柱状图信息
                bMargin = 15;
                tobalBars = dataArr.length;
                bWidth = parseInt( cWidth/tobalBars - bMargin );
                maxValue = 0;
                for(var i=0; i<dataArr.length; i++){
                    var barVal = parseInt( dataArr[i][1] );
                    if( barVal > maxValue ){
                        maxValue = barVal;
                    }
                }
                maxValue += 50;
                totalYNomber = 10;
                // 运动相关
                ctr = 1;
                numctr = 100;
                speed = 10;

                //柱状图渐变色
                gradient = ctx.createLinearGradient(0, 0, 0, 300);
                gradient.addColorStop(0, 'green');
                gradient.addColorStop(1, 'rgba(67,203,36,1)');

            }

            // 绘制图表轴、标签和标记
            function drawLineLabelMarkers(){
                ctx.translate(0.5,0.5);  // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
                ctx.font = "12px Arial";
                ctx.lineWidth = 1;
                ctx.fillStyle = "#000";
                ctx.strokeStyle = "#000";
                // y轴
                drawLine(originX, originY, originX, cMargin);
                // x轴
                drawLine(originX, originY, originX+cWidth, originY);

                // 绘制标记
                drawMarkers();
                ctx.translate(-0.5,-0.5);  // 还原位置
            }

            // 画线的方法
            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 = parseInt(maxValue/totalYNomber);
                ctx.textAlign = "right";
                for(var i=0; i<=totalYNomber; i++){
                    var markerVal =  i*oneVal;
                    var xMarker = originX-5;
                    var yMarker = parseInt( cHeight*(1-markerVal/maxValue) ) + cMargin;
                    //console.log(xMarker, yMarker+3,markerVal/maxValue,originY);
                    ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 文字
                    if(i>0){
                        drawLine(originX, yMarker, originX+cWidth, yMarker);
                    }
                }
                // 绘制 x
                ctx.textAlign = "center";
                for(var i=0; i<tobalBars; i++){
                    var markerVal = dataArr[i][0];
                    var xMarker = parseInt( originX+cWidth*(i/tobalBars)+bMargin+bWidth/2 );
                    var yMarker = originY+15;
                    ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
                }
                // 绘制标题 y
                ctx.save();
                ctx.rotate(-Math.PI/2);
                ctx.fillText("产 量", -canvas.height/2, cSpace-10);
                ctx.restore();
                // 绘制标题 x
                ctx.fillText("年份", originX+cWidth/2, originY+cSpace/2+10);
            };

            //绘制柱形图
            function drawBarAnimate(mouseMove){
                for(var i=0; i<tobalBars; i++){
                    var oneVal = parseInt(maxValue/totalYNomber);
                    var barVal = dataArr[i][1];
                    var barH = parseInt( cHeight*barVal/maxValue * ctr/numctr );
                    var y = originY - barH;
                    var x = originX + (bWidth+bMargin)*i + bMargin;
                    drawRect( x, y, bWidth, barH, mouseMove );  //高度减一避免盖住x轴
                    ctx.fillText(parseInt(barVal*ctr/numctr), x+15, y-8); // 文字
                }
                if(ctr<numctr){
                    ctr++;
                    setTimeout(function(){
                        ctx.clearRect(0,0,canvas.width, canvas.height);
                        drawLineLabelMarkers();
                        drawBarAnimate();
                    }, speed);
                }
            }

            //绘制方块
            function drawRect( x, y, X, Y, mouseMove ){

                ctx.beginPath();
                ctx.rect( x, y, X, Y );
                if(mouseMove && ctx.isPointInPath(mousePosition.x, mousePosition.y)){ //如果是鼠标移动的到柱状图上，重新绘制图表
                    ctx.fillStyle = "green";
                }else{
                    ctx.fillStyle = gradient;
                    ctx.strokeStyle = gradient;
                }
                ctx.fill();
                ctx.closePath();

            }


        }


        goBarChart(
            [[2007, 750], [2008, 425], [2009, 960], [2010, 700], [2011, 800], [2012, 975], [2013, 375], [2014, 775]]
            )


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