媒介

canvas 壮大的功用让它成为了 HTML5 中非常重要的部份，至于它是什么，这里就不须要我多作引见了。而可视化图表，则是 canvas 壮大功用的表现之一。

如今已经有了许多成熟的图表插件都是用 canvas 完成的，Chart.js、ECharts等能够制造出悦目炫酷的图表，而且险些掩盖了一切图表的完成。

有时候本身只想画个柱状图，本身写又认为贫苦，用他人插件又觉得累坠，末了翻开百度，拷段代码，粘贴上来修修改改。还不如本身撸一个呢。

结果

动画结果图片显现不出来，能够到最下面找demo地点

剖析

能够这个图表由 xy轴、数据条形和题目构成。

• 轴线：能够运用 moveTo() & lineTo() 完成

• 笔墨：能够运用 fillText() 完成

• 长方形：能够运用 fillRect() 完成

如许看来，好像并没有多灾。

完成

定义画布

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

canvas 标签只是个容器，真正完成绘图的照样 JavaScript。

画坐标轴

坐标轴就是两条横线，也就是canvas里最基本的学问。

• 由 ctx.beginPath() 最先一条新的途径

• ctx.lineWidth=1 设置线条宽度

• ctx.strokeStyle=’#000000′ 设置线条色彩

• ctx.moveTo(x,y) 定义线条的出发点

• ctx.lineTo(x1,y1) 定义线条的尽头

• 末了 ctx.stroke() 把出发点和尽头连成一条线

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();

画坐标点

y轴上若干坐标点由本身来定义，须要获取到数据的最大值来盘算y轴上的坐标值。x轴的点则由传入的数据长度决议，坐标值由传入数据的 xAxis 属性决议。

• 坐标值就是笔墨，由 ctx.fillText(value, x, y) 添补笔墨，value 为笔墨值，x y 为值的坐标

• ctx.textAlign=’center’ 设置笔墨居中对齐

• ctx.fillStyle=’#000000′ 设置笔墨添补色彩

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 = 'center';
ctx.fillStyle = '#000000';
ctx.strokeStyle = '#000000';
// 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);
}

柱状动画

接下来要把数据经由过程柱状的上下显现出来，这里有个动画结果，柱状会从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 < 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();

• 柱状等于画矩形，由 ctx.fillRect(x, y, width, height) 完成，x y 为矩形左上角的坐标，width height 为矩形的宽高，单元为像素

• ctx.fillStyle=’#1E9FFF’ 设置添补色彩

到这里，一个最基本的柱状图就完成了。接下来，我们能够为他增加题目。

题目

要安排题目，就会发明我们一大早定义的 padding 内边距确切有效，总不能把题目给掩盖到柱状图上吧。然则题目有的是在顶部，有的在底部，那末就不能写死了。定一个变量 position 来推断位置去画出来。这个简朴。

// 题目
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)
    }
}

监听鼠标挪动事宜

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

那我怎样晓得在柱状里啊，发如今 drawAnimation() 里会有每一个柱状的坐标，那我痛快把坐标给保留到 data 里。那末鼠标在柱状里的前提应该是：

• ev.offsetX > data[i].left

• ev.offsetX < data[i].right

• ev.offsetY > data[i].top

• ev.offsetY < data[i].bottom

canvas.addEventListener('mousemove',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('我在第'+i+'个柱状里。');
        }
    }
})

总结

为了更轻易的运用，封装成组织函数。经由过程

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

参数可设置，很简朴就天生一个个性化的柱状图。代码地点：canvas-demo

末了加上折线图、饼图、环形图，完全封装成sChart.js插件，插件地点：sChart.js

更多文章：lin-xin/blog

微信赞扬