日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML5進(jìn)階系列：canvas動態(tài)圖表

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

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的余干網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

有時候自己只想畫個柱狀圖，自己寫又覺得麻煩，用別人插件又感覺累贅，***打開百度，拷段代碼，粘貼上來修修改改。還不如自己擼一個呢。

效果

動畫效果圖片顯示不出來，可以到最下面找demo地址

分析

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

  • 軸線：可以使用 moveTo() & lineTo() 實(shí)現(xiàn)
  • 文字：可以使用 fillText() 實(shí)現(xiàn)
  • 長方形：可以使用 fillRect() 實(shí)現(xiàn)

這樣看來，似乎并沒有多難。

實(shí)現(xiàn)

定義畫布

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

畫坐標(biāo)軸

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

  • 由 ctx.beginPath() 開始一條新的路徑
  • 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)連成一條線
 
 
 
 
    
  
  
  
  
  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;       // 坐標(biāo)軸到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.

畫坐標(biāo)點(diǎn)

y軸上多少坐標(biāo)點(diǎn)由自己來定義，需要獲取到數(shù)據(jù)的***值來計(jì)算y軸上的坐標(biāo)值。x軸的點(diǎn)則由傳入的數(shù)據(jù)長度決定，坐標(biāo)值由傳入數(shù)據(jù)的 xAxis 屬性決定。

  • 坐標(biāo)值就是文字，由 ctx.fillText(value, x, y) 填充文字，value 為文字值，x y 為值的坐標(biāo)
  • ctx.textAlign=’center’ 設(shè)置文字居中對齊
  • ctx.fillStyle=’#000000’ 設(shè)置文字填充顏色
 
 
 
 
    
  
  
  
  
  1. var yNumber = 5;                                                // y軸的段數(shù) 
    2.   
  
  
  
  2. var yLength = Math.floor((height - padding * 2) / yNumber);     // y軸每段的真實(shí)長度 
    3.   
  
  
  
  3. var xLength = Math.floor((width - padding * 2) / data.length);  // x軸每段的真實(shí)長度 
    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.

柱狀動畫

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

requestAnimationFrame 不需要自己設(shè)置定時時間，而是跟著瀏覽器的繪制走。這樣就不會掉幀，自然就流暢。

requestAnimationFrame 原本只支持IE10以上，不過可以通過兼容的寫法實(shí)現(xiàn)兼容到IE6都行。

 
 
 
 
    
  
  
  
  
  1. function looping() { 
    2.   
  
  
  
  2.     looped = requestAnimationFrame(looping); 
    3.   
  
  
  
  3.     if(current < 100){       
    4.   
  
  
  
  4.     // current 用來計(jì)算當(dāng)前柱狀的高度占最終高度的百分之幾，通過不斷循環(huán)實(shí)現(xiàn)柱狀上升的動畫 
    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) 實(shí)現(xiàn)，x y 為矩形左上角的坐標(biāo)，width height 為矩形的寬高，單位為像素
  • ctx.fillStyle=’#1E9FFF’ 設(shè)置填充顏色

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

標(biāo)題

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

 
 
 
 
    
  
  
  
  
  1. // 標(biāo)題 
    2.   
  
  
  
  2. if(title){                      // 也不一定有標(biāo)題 
    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.

監(jiān)聽鼠標(biāo)移動事件

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

那我怎么知道在柱狀里啊，發(fā)現(xiàn)在 drawAnimation() 里會有每個柱狀的坐標(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
 
 
 
 
    
  
  
  
  
  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.

總結(jié)

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

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

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

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

【本文為專欄作者“林鑫”的原創(chuàng)稿件，轉(zhuǎn)載請通過微信公眾號聯(lián)系作者獲取授權(quán)】


文章名稱：HTML5進(jìn)階系列：canvas動態(tài)圖表
URL地址：http://www.dlmjj.cn/article/djdpsgi.html