canvas动态图表

前言

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

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

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

效果

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

var yNumber = 5;                                                // y轴的段数var yLength = Math.floor((height - padding * 2) / yNumber);     // y轴每段的真实长度var xLength = Math.floor((width - padding * 2) / data.length);  // x轴每段的真实长度ctx.beginPath();ctx.textAlign = &＃39;center&＃39;;ctx.fillStyle = &＃39;#000000&＃39;;ctx.strokeStyle = &＃39;#000000&＃39;;// x轴刻度和值for (var i = 0; i 

柱状动画
接下来要把数据通过柱状的高低显示出来，这里有个动画效果，柱状会从0升到对应的值。在 canvas 上实现动画我们可以使用 setInterval、setTimeout 和 requestAnimationFrame。
requestAnimationFrame 不需要自己设置定时时间，而是跟着浏览器的绘制走。这样就不会掉帧，自然就流畅。
requestAnimationFrame 原本只支持IE10以上，不过可以通过兼容的写法实现兼容到IE6都行。

function looping() {
    looped = requestAnimationFrame(looping);
    if(current <100){      
    // current 用来计算当前柱状的高度占最终高度的百分之几，通过不断循环实现柱状上升的动画
        current = (current + 3) > 100 ? 100 : (current + 3);
        drawAnimation();
    }else{
        window.cancelAnimationFrame(looped);
        looped = null;
    }}function drawAnimation() {
    for(var i = 0; i 

柱状即是画矩形，由 ctx.fillRect(x, y, width, height) 实现，x y 为矩形左上角的坐标，width height 为矩形的宽高，单位为像素
ctx.fillsourceCode">
// 标题if(title){                      // 也不一定有标题
    ctx.textAlign = &＃39;center&＃39;;
    ctx.fillStyle = &＃39;#000000&＃39;;  // 颜色，也可以不用写死，个性化嘛
    ctx.fOnt= &＃39;16px Microsoft YaHei&＃39;
    if(titlePosition === &＃39;bottom&＃39; && padding >= 40){
        ctx.fillText(title,width/2,height-5)    }else{
        ctx.fillText(title,width/2,padding/2)    }}

监听鼠标移动事件
我们看到，有些图表，把鼠标移上去，当前的柱状就变色了，移开之后又变回原来的颜色。这里就需要监听 mouseover 事件，当鼠标的位置位于柱状的面积内，触发事件。
那我怎么知道在柱状里啊，发现在 drawAnimation() 里会有每个柱状的坐标，那我干脆把坐标给保存到 data 里。那么鼠标在柱状里的条件应该是：
ev.offsetX > data[i].left
ev.offsetX 
ev.offsetY > data[i].top
ev.offsetY 

canvas.addEventListener(&＃39;mousemove&＃39;,function(ev){
    var ev = ev||window.event;
    for (var i=0;i data[i].left &&
        ev.offsetX  data[i].top &&
        ev.offsetY 

总结
为了更方便的使用，封装成构造函数。通过
var chart = new sBarChart(&＃39;canvas&＃39;,data,{
    title: &＃39;xxx公司年度盈利&＃39;,   // 标题
    titleColor: &＃39;#000000&＃39;,      // 标题颜色
    titlePosition: &＃39;top&＃39;,       // 标题位置
    bgColor: &＃39;#ffffff&＃39;,         // 背景色
    fillColor: &＃39;#1E9FFF&＃39;,       // 柱状填充色
    axisColor: &＃39;#666666&＃39;,       // 坐标轴颜色
    contentColor: &＃39;#a5f0f6&＃39;     // 内容横线颜色
});
参数可配置，很简单就生成一个个性化的柱状图。代码地址：canvas-demo
最后加上折线图、饼图、环形图，完整封装成sChart.js插件，插件地址：sChart.js
以上就是canvas 动态图表的详细内容，更多请关注其它相关文章！