canvas 动态图表

<canvas id="canvas" width="600" height="500"></canvas>

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var width = canvas.width;var height = canvas.height;var padding = 50;       // 坐标轴到canvas边框的边距，留边距写文字ctx.beginPath();ctx.lineWidth = 1;// y轴线ctx.moveTo(padding + 0.5, height - padding + 0.5);ctx.lineTo(padding + 0.5, padding + 0.5);ctx.stroke();// x轴线ctx.moveTo(padding + 0.5, height - padding + 0.5);ctx.lineTo(width - padding + 0.5, height - padding + 0.5);ctx.stroke();

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 < data.length; i++) {    var xAxis = data[i].xAxis;    var xlen = xLength * (i + 1);    ctx.moveTo(padding + xlen, height - padding);    ctx.lineTo(padding + xlen, height - padding + 5);    ctx.stroke();                                       // 画轴线上的刻度    ctx.fillText(xAxis, padding + xlen - xLength / 2, height - padding + 15);   // 填充文字}// y轴刻度和值for (var i = 0; i < yNumber; i++) {    var y = yFictitious * (i + 1);    var ylen = yLength * (i + 1);    ctx.moveTo(padding, height - padding - ylen);    ctx.lineTo(padding - 5, height - padding - ylen);    ctx.stroke();    ctx.fillText(y, padding - 10, height - padding - ylen + 5);}

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 < data.length; i++) {        var x = Math.ceil(data[i].value * current / 100 * yRatio);        var y = height - padding - x;        ctx.fillRect(padding + xLength * (i + 0.25), y, xLength/2, x);        // 保存每个柱状的信息        data[i].left = padding + xLength / 4 + xLength * i;        data[i].top = y;        data[i].right = padding + 3 * xLength / 4 + xLength * i;        data[i].bottom = height - padding;    }}looping();

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

canvas.addEventListener(&#39;mousemove&#39;,function(ev){    var ev = ev||window.event;    for (var i=0;i<data.length;i++){    for (var i=0;i<data.length;i++){        if(ev.offsetX > data[i].left &&        ev.offsetX < data[i].right &&        ev.offsetY > data[i].top &&        ev.offsetY < data[i].bottom){            console.log(&#39;我在第&#39;+i+&#39;个柱状里。&#39;);        }    }})

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