摘要：而可視化圖表，則是強(qiáng)大功能的表現(xiàn)之一。效果動(dòng)畫效果圖片顯示不出來(lái)，可以到最下面找地址分析可以這個(gè)圖表由軸數(shù)據(jù)條形和標(biāo)題組成。這里就需要監(jiān)聽(tīng)事件，當(dāng)鼠標(biāo)的位置位于柱狀的面積內(nèi)，觸發(fā)事件。

canvas 強(qiáng)大的功能讓它成為了 HTML5 中非常重要的部分，至于它是什么，這里就不需要我多作介紹了。而可視化圖表，則是 canvas 強(qiáng)大功能的表現(xiàn)之一。

現(xiàn)在已經(jīng)有了很多成熟的圖表插件都是用 canvas 實(shí)現(xiàn)的，Chart.js、ECharts等可以制作出好看炫酷的圖表，而且?guī)缀醺采w了所有圖表的實(shí)現(xiàn)。

有時(shí)候自己只想畫個(gè)柱狀圖，自己寫又覺(jué)得麻煩，用別人插件又感覺(jué)累贅，最后打開(kāi)百度，拷段代碼，粘貼上來(lái)修修改改。還不如自己擼一個(gè)呢。

動(dòng)畫效果圖片顯示不出來(lái)，可以到最下面找demo地址

可以這個(gè)圖表由 xy軸、數(shù)據(jù)條形和標(biāo)題組成。

軸線：可以使用 moveTo() & lineTo() 實(shí)現(xiàn)

文字：可以使用 fillText() 實(shí)現(xiàn)

長(zhǎng)方形：可以使用 fillRect() 實(shí)現(xiàn)

這樣看來(lái)，似乎并沒(méi)有多難。

canvas 標(biāo)簽只是個(gè)容器，真正實(shí)現(xiàn)畫圖的還是 JavaScript。

坐標(biāo)軸就是兩條橫線，也就是canvas里最基礎(chǔ)的知識(shí)。

由 ctx.beginPath() 開(kāi)始一條新的路徑

ctx.lineWidth=1 設(shè)置線條寬度

ctx.strokeStyle="#000000" 設(shè)置線條顏色

ctx.moveTo(x,y) 定義線條的起點(diǎn)

ctx.lineTo(x1,y1) 定義線條的終點(diǎn)

最后 ctx.stroke() 把起點(diǎn)和終點(diǎn)連成一條線

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var padding = 50;        // 坐標(biāo)軸到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軸上多少坐標(biāo)點(diǎn)由自己來(lái)定義，需要獲取到數(shù)據(jù)的最大值來(lái)計(jì)算y軸上的坐標(biāo)值。x軸的點(diǎn)則由傳入的數(shù)據(jù)長(zhǎng)度決定，坐標(biāo)值由傳入數(shù)據(jù)的 xAxis 屬性決定。

坐標(biāo)值就是文字，由 ctx.fillText(value, x, y) 填充文字，value 為文字值，x y 為值的坐標(biāo)

ctx.textAlign="center" 設(shè)置文字居中對(duì)齊

ctx.fillStyle="#000000" 設(shè)置文字填充顏色

var yNumber = 5;                                                // y軸的段數(shù)
var yLength = Math.floor((height - padding * 2) / yNumber);     // y軸每段的真實(shí)長(zhǎng)度
var xLength = Math.floor((width - padding * 2) / data.length);  // x軸每段的真實(shí)長(zhǎng)度

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

接下來(lái)要把數(shù)據(jù)通過(guò)柱狀的高低顯示出來(lái)，這里有個(gè)動(dòng)畫效果，柱狀會(huì)從0升到對(duì)應(yīng)的值。在 canvas 上實(shí)現(xiàn)動(dòng)畫我們可以使用 setInterval、setTimeout 和 requestAnimationFrame。

requestAnimationFrame 不需要自己設(shè)置定時(shí)時(shí)間，而是跟著瀏覽器的繪制走。這樣就不會(huì)掉幀，自然就流暢。
requestAnimationFrame 原本只支持IE10以上，不過(guò)可以通過(guò)兼容的寫法實(shí)現(xiàn)兼容到IE6都行。

function looping() {
    looped = requestAnimationFrame(looping);
    if(current < 100){      
    // current 用來(lái)計(jì)算當(dāng)前柱狀的高度占最終高度的百分之幾，通過(guò)不斷循環(huán)實(shí)現(xiàn)柱狀上升的動(dòng)畫
        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);
        // 保存每個(gè)柱狀的信息
        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) 實(shí)現(xiàn)，x y 為矩形左上角的坐標(biāo)，width height 為矩形的寬高，單位為像素

ctx.fillStyle="#1E9FFF" 設(shè)置填充顏色

到這里，一個(gè)最基本的柱狀圖就完成了。接下來(lái)，我們可以為他添加標(biāo)題。

要放置標(biāo)題，就會(huì)發(fā)現(xiàn)我們一大早定義的 padding 內(nèi)邊距確實(shí)有用，總不能把標(biāo)題給覆蓋到柱狀圖上吧。但是標(biāo)題有的是在頂部，有的在底部，那么就不能寫死了。定一個(gè)變量 position 來(lái)判斷位置去畫出來(lái)。這個(gè)簡(jiǎn)單。

// 標(biāo)題
if(title){                      // 也不一定有標(biāo)題
    ctx.textAlign = "center";
    ctx.fillStyle = "#000000";  // 顏色，也可以不用寫死，個(gè)性化嘛
    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)
    }
}

我們看到，有些圖表，把鼠標(biāo)移上去，當(dāng)前的柱狀就變色了，移開(kāi)之后又變回原來(lái)的顏色。這里就需要監(jiān)聽(tīng) mouseover 事件，當(dāng)鼠標(biāo)的位置位于柱狀的面積內(nèi)，觸發(fā)事件。

那我怎么知道在柱狀里啊，發(fā)現(xiàn)在 drawAnimation() 里會(huì)有每個(gè)柱狀的坐標(biāo)，那我干脆把坐標(biāo)給保存到 data 里。那么鼠標(biāo)在柱狀里的條件應(yīng)該是：

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[i].left &&
        ev.offsetX < data[i].right &&
        ev.offsetY > data[i].top &&
        ev.offsetY < data[i].bottom){
            console.log("我在第"+i+"個(gè)柱狀里。");
        }
    }
})

為了更方便的使用，封裝成構(gòu)造函數(shù)。通過(guò)

var chart = new sBarChart("canvas",data,{
    title: "xxx公司年度盈利",   // 標(biāo)題
    titleColor: "#000000",      // 標(biāo)題顏色
    titlePosition: "top",       // 標(biāo)題位置
    bgColor: "#ffffff",         // 背景色
    fillColor: "#1E9FFF",       // 柱狀填充色
    axisColor: "#666666",       // 坐標(biāo)軸顏色
    contentColor: "#a5f0f6"     // 內(nèi)容橫線顏色
});

參數(shù)可配置，很簡(jiǎn)單就生成一個(gè)個(gè)性化的柱狀圖。代碼地址：canvas-demo

最后加上折線圖、餅圖、環(huán)形圖，完整封裝成sChart.js插件，插件地址：sChart.js