HTML5进阶系列：canvas动态图表

canvas 强大的功能让它成为了 HTML5 中非常重要的部分，至于它是什么，这里就不需要我多作介绍了。而可视化图表，则是 canvas 强大功能的表现之一。

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的余干网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

现在已经有了很多成熟的图表插件都是用 canvas 实现的，Chart.js、ECharts等可以制作出好看炫酷的图表，而且几乎覆盖了所有图表的实现。

有时候自己只想画个柱状图，自己写又觉得麻烦，用别人插件又感觉累赘，***打开百度，拷段代码，粘贴上来修修改改。还不如自己撸一个呢。

效果

动画效果图片显示不出来，可以到最下面找demo地址

分析

可以这个图表由 xy轴、数据条形和标题组成。

  • 轴线：可以使用 moveTo() & lineTo() 实现
  • 文字：可以使用 fillText() 实现
  • 长方形：可以使用 fillRect() 实现

这样看来，似乎并没有多难。

实现

定义画布

 
 
 
 
    
  
  
  
  
  1.  
    2.

canvas 标签只是个容器，真正实现画图的还是 JavaScript。

画坐标轴

坐标轴就是两条横线，也就是canvas里最基础的知识。

  • 由 ctx.beginPath() 开始一条新的路径
  • ctx.lineWidth=1 设置线条宽度
  • ctx.strokeStyle=’#000000’ 设置线条颜色
  • ctx.moveTo(x,y) 定义线条的起点
  • ctx.lineTo(x1,y1) 定义线条的终点
  • *** ctx.stroke() 把起点和终点连成一条线
 
 
 
 
    
  
  
  
  
  1. var canvas = document.getElementById('canvas'); 
    2.   
  
  
  
  2. var ctx = canvas.getContext('2d'); 
    3.   
  
  
  
  3. var width = canvas.width; 
    4.   
  
  
  
  4. var height = canvas.height; 
    5.   
  
  
  
  5. var padding = 50;       // 坐标轴到canvas边框的边距，留边距写文字 
    6.   
  
  
  
  6. ctx.beginPath(); 
    7.   
  
  
  
  7. ctx.lineWidth = 1; 
    8.   
  
  
  
  8. // y轴线 
    9.   
  
  
  
  9. ctx.moveTo(padding + 0.5, height - padding + 0.5); 
    10.   
  
  
  
  10. ctx.lineTo(padding + 0.5, padding + 0.5); 
    11.   
  
  
  
  11. ctx.stroke(); 
    12.   
  
  
  
  12. // x轴线 
    13.   
  
  
  
  13. ctx.moveTo(padding + 0.5, height - padding + 0.5); 
    14.   
  
  
  
  14. ctx.lineTo(width - padding + 0.5, height - padding + 0.5); 
    15.   
  
  
  
  15. ctx.stroke(); 
    16.

画坐标点

y轴上多少坐标点由自己来定义，需要获取到数据的***值来计算y轴上的坐标值。x轴的点则由传入的数据长度决定，坐标值由传入数据的 xAxis 属性决定。

  • 坐标值就是文字，由 ctx.fillText(value, x, y) 填充文字，value 为文字值，x y 为值的坐标
  • ctx.textAlign=’center’ 设置文字居中对齐
  • ctx.fillStyle=’#000000’ 设置文字填充颜色
 
 
 
 
    
  
  
  
  
  1. var yNumber = 5;                                                // y轴的段数 
    2.   
  
  
  
  2. var yLength = Math.floor((height - padding * 2) / yNumber);     // y轴每段的真实长度 
    3.   
  
  
  
  3. var xLength = Math.floor((width - padding * 2) / data.length);  // x轴每段的真实长度 
    4.   
  
  
  
  4. ctx.beginPath(); 
    5.   
  
  
  
  5. ctx.textAlign = 'center'; 
    6.   
  
  
  
  6. ctx.fillStyle = '#000000'; 
    7.   
  
  
  
  7. ctx.strokeStyle = '#000000'; 
    8.   
  
  
  
  8. // x轴刻度和值 
    9.   
  
  
  
  9. for (var i = 0; i < data.length; i++) { 
    10.   
  
  
  
  10.     var xAxis = data[i].xAxis; 
    11.   
  
  
  
  11.     var xlen = xLength * (i + 1); 
    12.   
  
  
  
  12.     ctx.moveTo(padding + xlen, height - padding); 
    13.   
  
  
  
  13.     ctx.lineTo(padding + xlen, height - padding + 5); 
    14.   
  
  
  
  14.     ctx.stroke();                                       // 画轴线上的刻度 
    15.   
  
  
  
  15.     ctx.fillText(xAxis, padding + xlen - xLength / 2, height - padding + 15);   // 填充文字 
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17. // y轴刻度和值 
    18.   
  
  
  
  18. for (var i = 0; i < yNumber; i++) { 
    19.   
  
  
  
  19.     var y = yFictitious * (i + 1); 
    20.   
  
  
  
  20.     var ylen = yLength * (i + 1); 
    21.   
  
  
  
  21.     ctx.moveTo(padding, height - padding - ylen); 
    22.   
  
  
  
  22.     ctx.lineTo(padding - 5, height - padding - ylen); 
    23.   
  
  
  
  23.     ctx.stroke(); 
    24.   
  
  
  
  24.     ctx.fillText(y, padding - 10, height - padding - ylen + 5); 
    25.   
  
  
  
  25. } 
    26.

柱状动画

接下来要把数据通过柱状的高低显示出来，这里有个动画效果，柱状会从0升到对应的值。在 canvas 上实现动画我们可以使用 setInterval、setTimeout 和 requestAnimationFrame。

requestAnimationFrame 不需要自己设置定时时间，而是跟着浏览器的绘制走。这样就不会掉帧，自然就流畅。

requestAnimationFrame 原本只支持IE10以上，不过可以通过兼容的写法实现兼容到IE6都行。

 
 
 
 
    
  
  
  
  
  1. function looping() { 
    2.   
  
  
  
  2.     looped = requestAnimationFrame(looping); 
    3.   
  
  
  
  3.     if(current < 100){       
    4.   
  
  
  
  4.     // current 用来计算当前柱状的高度占最终高度的百分之几，通过不断循环实现柱状上升的动画 
    5.   
  
  
  
  5.         current = (current + 3) > 100 ? 100 : (current + 3); 
    6.   
  
  
  
  6.         drawAnimation(); 
    7.   
  
  
  
  7.     }else{ 
    8.   
  
  
  
  8.         window.cancelAnimationFrame(looped); 
    9.   
  
  
  
  9.         looped = null; 
    10.   
  
  
  
  10.     } 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12. function drawAnimation() { 
    13.   
  
  
  
  13.     for(var i = 0; i < data.length; i++) { 
    14.   
  
  
  
  14.         var x = Math.ceil(data[i].value * current / 100 * yRatio); 
    15.   
  
  
  
  15.         var y = height - padding - x; 
    16.   
  
  
  
  16.         ctx.fillRect(padding + xLength * (i + 0.25), y, xLength/2, x); 
    17.   
  
  
  
  17.         // 保存每个柱状的信息 
    18.   
  
  
  
  18.         data[i].left = padding + xLength / 4 + xLength * i; 
    19.   
  
  
  
  19.         data[i].top = y; 
    20.   
  
  
  
  20.         data[i].right = padding + 3 * xLength / 4 + xLength * i; 
    21.   
  
  
  
  21.         data[i].bottom = height - padding; 
    22.   
  
  
  
  22.     } 
    23.   
  
  
  
  23. } 
    24.   
  
  
  
  24. looping(); 
    25.
  • 柱状即是画矩形，由 ctx.fillRect(x, y, width, height) 实现，x y 为矩形左上角的坐标，width height 为矩形的宽高，单位为像素
  • ctx.fillStyle=’#1E9FFF’ 设置填充颜色

到这里，一个最基本的柱状图就完成了。接下来，我们可以为他添加标题。

标题

要放置标题，就会发现我们一大早定义的 padding 内边距确实有用，总不能把标题给覆盖到柱状图上吧。但是标题有的是在顶部，有的在底部，那么就不能写死了。定一个变量 position 来判断位置去画出来。这个简单。

 
 
 
 
    
  
  
  
  
  1. // 标题 
    2.   
  
  
  
  2. if(title){                      // 也不一定有标题 
    3.   
  
  
  
  3.     ctx.textAlign = 'center'; 
    4.   
  
  
  
  4.     ctx.fillStyle = '#000000';  // 颜色，也可以不用写死，个性化嘛 
    5.   
  
  
  
  5.     ctx.font = '16px Microsoft YaHei' 
    6.   
  
  
  
  6.     if(titlePosition === 'bottom' && padding >= 40){ 
    7.   
  
  
  
  7.         ctx.fillText(title,width/2,height-5) 
    8.   
  
  
  
  8.     }else{ 
    9.   
  
  
  
  9.         ctx.fillText(title,width/2,padding/2) 
    10.   
  
  
  
  10.     } 
    11.   
  
  
  
  11. } 
    12.

监听鼠标移动事件

我们看到，有些图表，把鼠标移上去，当前的柱状就变色了，移开之后又变回原来的颜色。这里就需要监听 mouseover 事件，当鼠标的位置位于柱状的面积内，触发事件。

那我怎么知道在柱状里啊，发现在 drawAnimation() 里会有每个柱状的坐标，那我干脆把坐标给保存到 data 里。那么鼠标在柱状里的条件应该是：

  • ev.offsetX > data[i].left
  • ev.offsetX < data[i].right
  • ev.offsetY > data[i].top
  • ev.offsetY < data[i].bottom
 
 
 
 
    
  
  
  
  
  1. canvas.addEventListener('mousemove',function(ev){ 
    2.   
  
  
  
  2.     var ev = ev||window.event; 
    3.   
  
  
  
  3.     for (var i=0;i  
  
  
  
  4.     for (var i=0;i  
  
  
  
  5.         if(ev.offsetX > data[i].left && 
    6.   
  
  
  
  6.         ev.offsetX < data[i].right && 
    7.   
  
  
  
  7.         ev.offsetY > data[i].top && 
    8.   
  
  
  
  8.         ev.offsetY < data[i].bottom){ 
    9.   
  
  
  
  9.             console.log('我在第'+i+'个柱状里。'); 
    10.   
  
  
  
  10.         } 
    11.   
  
  
  
  11.     } 
    12.   
  
  
  
  12. }) 
    13.

总结

为了更方便的使用，封装成构造函数。通过

 
 
 
 
    
  
  
  
  
  1. var chart = new sBarChart('canvas',data,{ 
    2.   
  
  
  
  2.     title: 'xxx公司年度盈利',   // 标题 
    3.   
  
  
  
  3.     titleColor: '#000000',      // 标题颜色 
    4.   
  
  
  
  4.     titlePosition: 'top',       // 标题位置 
    5.   
  
  
  
  5.     bgColor: '#ffffff',         // 背景色 
    6.   
  
  
  
  6.     fillColor: '#1E9FFF',       // 柱状填充色 
    7.   
  
  
  
  7.     axisColor: '#666666',       // 坐标轴颜色 
    8.   
  
  
  
  8.     contentColor: '#a5f0f6'     // 内容横线颜色 
    9.   
  
  
  
  9. }); 
    10.

参数可配置，很简单就生成一个个性化的柱状图。代码地址：canvas-demo

***加上折线图、饼图、环形图，完整封装成sChart.js插件，插件地址：sChart.js

【本文为专栏作者“林鑫”的原创稿件，转载请通过微信公众号联系作者获取授权】

本文名称：HTML5进阶系列：canvas动态图表
浏览路径：http://www.gawzjz.com/qtweb2/news10/410.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站收录知识

分类信息网站

盐亭网站制作公司　　 　网站制作公司　　 　网页改版　　 　定制网站　　 　郫县网站建设　　 　梓潼做网站　　 　名片印刷　　 　自贡服务器托管　　 　节能环保网站建设方案　　 　买友情链接　　 　成都网站推广　　 　微信开发　　 　手机网站建设　　 　力比特工程　　 　雅安机房托管　　 　广安网站建设　　 　网站推广　　 　成都手机网站建设　　 　成都艺考培训　　 　渠县网站建设