`

canvas__1 柱状图

    博客分类：
  • HTML
 
阅读更多 
<!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>


备注：昨天测试了下这个demo，加到自己的项目中时，x轴及年份字样一直不显示，原因是我对数据源中的基础数据做了修改，canvas的画板hight参数不匹配了。如果碰到类似情况可微调hight的值，即可正常显示

参考：https://www.cnblogs.com/chengduxiaoc/p/7664397.html
分享到：
| MVC学习之七_____上传多张图片
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    原生canvas实现柱状图封装

    本话题将深入探讨如何使用原生Canvas API实现一个横向柱状图，并对其进行封装，以供后续重复使用。在这个过程中，我们将涉及到`canvas-bar-across.html`和`canvas-extension.js`两个文件，它们分别用于展示柱状图的...

    Painter_Report_html5canvas_echarts_css_

    ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它可以很好地与Canvas结合使用，提供丰富的图表类型，如折线图、柱状图、饼图等。在Painter_Report中，ECharts可能被用来展示用户的绘画数据，例如统计...

    CanvasJS消费统计柱状图特效.zip

    在"CanvasJS消费统计柱状图特效.zip"这个压缩包中，包含了一个用于展示每周消费统计的柱状图特效代码。这种特效可以帮助用户以直观的方式理解他们的消费模式，从而更好地进行财务管理和决策。 柱状图是数据可视化中...

    HTML5代码集合_html5_html5canvas_

    通过JavaScript将数据转换为图形，可以实现折线图、柱状图、饼图等多种图表。 6. 交互性：`&lt;canvas&gt;`元素支持鼠标事件，如`click`、`mousemove`等，可以通过监听这些事件，实现用户与画布的交互，例如点击某部分...

    微信小程序Canvas绘制曲线图、饼图、柱状图、雷达图/蛛网图源码

    本文将详细讲解如何利用Canvas在微信小程序中绘制曲线图、饼图、柱状图以及雷达图/蛛网图。 首先，我们要了解Canvas的基本用法。在微信小程序中，可以创建一个 `&lt;canvas&gt;` 标签，并通过 `wx.createSelectorQuery()`...

    HTML5 Canvas每年游客人数统计柱状图表代码

    接下来，我们要创建柱状图的结构。这涉及到计算每个柱子的位置、宽度和高度，高度通常代表数据值。在这个案例中，数据可能是每年的游客人数。我们可以通过遍历数据数组，为每个年份绘制一个柱子。 绘制柱状图的过程...

    html5自己写的柱状图

    本项目“html5自己写的柱状图”正是利用HTML5的Canvas API创建的一个简单柱状图，允许通过修改数据来直观展示各种统计数据。 Canvas是一个基于矢量图形的画布，它不包含任何内置的图形，但提供了丰富的API，允许...

    Bootstrap柱状图插件

    在Bootstrap中，柱状图是一种常用的数据可视化元素，它可以帮助用户直观地理解各种数据的对比和分布。Bootstrap柱状图插件通常基于JavaScript库，如jQuery或Chart.js，来增强其功能和交互性。 柱状图是数据可视化的...

    canvasjs-2.3.2(1)_canvasjs_

    CanvasJS的核心特性在于它提供了一个直观且灵活的API，使得开发者能够轻松地在HTML5的canvas元素上绘制各种类型的图表，如柱状图、折线图、饼图、散点图等。以下是对CanvasJS关键知识点的详细说明： 1. **API接口**...

    echarts实现动态柱状图

    1. `series`：定义数据系列，每个系列对应图表中的一个柱状图。在动态柱状图中，我们需要设置`type`为`'bar'`，并设定数据数组。数据可以是静态的，也可以是动态的，通过定时更新来实现动态效果。 2. `animation`：...

    c#绘制3D柱状图

    在XAML文件中，添加一个`Canvas`或`Grid`作为绘图区域，这将是3D柱状图的容器。你还需要一个`Button`或其他交互元素，用于触发柱状图的绘制或更新。 2. **引入图形库** C#本身并不直接支持3D图形绘制，因此我们...

    微信小程序demo：基于canvas的动态柱状图

    总之，这个"微信小程序demo：基于canvas的动态柱状图"项目旨在展示如何在微信小程序环境下集成和使用Canvas进行图形绘制，尤其是数据可视化。通过学习和实践这个项目，你可以掌握在小程序中创建交互式图表的关键技术...

    echartDemo柱状图折线图详解

    ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图等，适用于各种Web应用中的数据展示。本教程将详细讲解如何使用ECharts来创建柱状图和折线图，以及在C#环境中...

    Wpf实现柱状图

    在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中实现柱状图。WPF是.NET Framework的一部分，提供了一种强大的UI开发工具，允许开发者创建丰富的、交互式的桌面应用程序。柱状图是一种...

    自定义柱状图（可左右滑动）

    【标题】"自定义柱状图（可左右滑动）"是关于在Android开发中创建一个自定义视图（View）的知识点，该视图能够显示柱状图表，并且支持用户通过滑动来查看超出屏幕宽度的数据。在移动设备上，由于屏幕尺寸有限，当...

    canvasjs-master_canvasjs_

    然而，直接操作canvas API可能会比较复杂，CanvasJS库就是为了解决这个问题，它封装了底层的canvas操作，提供了一套更加友好的API来创建各种图表，如柱状图、折线图、饼图、散点图等。 CanvasJS的特性包括： 1. **...

    自定义 进度条使用，柱状图实现方法

    我们可以利用Canvas对象来画出我们的柱状图。Canvas提供了各种绘制图形的方法，如drawRect()用于绘制矩形，drawLine()用于绘制线，以及drawText()用于绘制文本。 3. 实现进度更新。当进度改变时，需要重绘视图以...

    动画柱状图

    【动画柱状图】是一种视觉效果丰富、交互性强的数据展示方式，尤其在移动应用开发中，如Android平台，常用于数据分析或数据可视化。这个小demo是开发者为了展示如何在Android应用中实现动态的柱状图效果而创建的。在...

    CanvasJS实现的消费统计柱状图特效源码.zip

    在这个“CanvasJS实现的消费统计柱状图特效源码.zip”压缩包中，你将找到一个用于展示消费统计数据的柱状图实例。这个源码可以帮助开发者快速理解和应用CanvasJS库来构建自己的数据展示项目。 首先，我们要了解...

Magicbox
Global site tag (gtag.js) - Google Analytics