canvas js 绘图插件_Canvas专题—绘制柱状图（2）
目標(biāo)：在我們了解過(guò)前兩章節(jié)的知識(shí)點(diǎn)以后，為了把知識(shí)點(diǎn)進(jìn)行連結(jié)，拓展，現(xiàn)在我們做一個(gè)圖表吧。
看一個(gè)echartst圖表
當(dāng)今Canvas庫(kù)有很多供我們選擇，比如，echarts在很大程度上能夠提高我們的工作效率，但是也存在著一些問(wèn)題：
- 從業(yè)務(wù)覆蓋度出發(fā)，echarts庫(kù)能提供很多模板，但是我們只需要其中的一種或者幾種就夠了，顯然造成了資源的浪費(fèi)；
- 如果業(yè)務(wù)需求變更，改進(jìn)，那么依靠圖表庫(kù)，肯定是不能滿足業(yè)務(wù)的，失去了靈活性。
這就是我們用Canvas打造自己圖表的原因。
分析圖表
讓我們先看一下目標(biāo)圖表的外觀
如圖所示，此圖表由坐標(biāo)軸X，Y，描述數(shù)字，文字，填充矩形，輔助線構(gòu)成。另外我們按比例計(jì)算坐標(biāo)，增強(qiáng)復(fù)用性。
準(zhǔn)備工作
讓我們先在一個(gè)文件夾內(nèi)建立2個(gè)文件夾，一個(gè)chart.html文件.：css文件夾，存放樣式；js文件夾，存放js代碼；html文件是程序入口文件，然后在chart.html文件中引入css，js文件夾中的對(duì)應(yīng)文件。
我們?cè)赾hart.html中寫一個(gè)div標(biāo)簽來(lái)作為存放Canvas的容器。
<!DOCTYPE html>js文件準(zhǔn)備
'use strict'從chart.js文件開(kāi)始
現(xiàn)在讓我們用面向?qū)ο蟮姆绞綄⑺肅anvas畫出來(lái)。用面向?qū)ο蟮暮锰幘褪琼?yè)面有多個(gè)圖表的時(shí)候我們調(diào)用函數(shù)，傳入所需的參數(shù)，放到容器通常div中即可。
模擬來(lái)自后臺(tái)的數(shù)據(jù)
var這里我們?cè)赾hart.js文件中寫入了data數(shù)組，是模擬后臺(tái)傳給我們的數(shù)據(jù)，畫圖基于此。其中用到了getRandomInt函數(shù)：
/*接著我們?cè)俣x一下所需要的變量
var定義所必需的變量
現(xiàn)在我們有了全局變量data，targetId，cw，ch。這些是我們準(zhǔn)備畫Canvas的必要參數(shù)。
圖表功能函數(shù)
我們現(xiàn)在準(zhǔn)備一個(gè)Bcharts構(gòu)造函數(shù)：
functionthis在函數(shù)內(nèi)，指向調(diào)用函數(shù)的對(duì)象。configureChart，配置圖表函數(shù)，init初始化函數(shù)包含了：
- createCanvas函數(shù)創(chuàng)建Canvas元素，并插入到div中，通過(guò)getContext('2d')得到繪圖上下文；
- handleData函數(shù)獲取來(lái)自后臺(tái)的數(shù)據(jù)x，y軸上的數(shù)據(jù)；
- prepareData函數(shù)對(duì)數(shù)據(jù)進(jìn)行處理，按比例計(jì)算，分配x，y軸坐標(biāo)的位置。；
- draw函數(shù)繪制圖表所有元素；
創(chuàng)建Canvas元素
通過(guò)createCanvas函數(shù)創(chuàng)建Canvas。
Bcharts設(shè)置Canvas參數(shù)
通過(guò)setCanvasParameters對(duì)Canvas必需的參數(shù)賦值到chart屬性。
Bcharts設(shè)置圖表比例
通過(guò)setChartParameters函數(shù)配置：x，y，文字，展示的比例。比例10,6可以根據(jù)ui需要自行更改。
Bcharts配置圖表
通過(guò)configureChart函數(shù)整合畫布，圖表比例的配置。
Bcharts初始化
定義init函數(shù)到Bcharts原型上，內(nèi)部調(diào)用如下方法：
Bcharts提取模擬數(shù)據(jù)
其實(shí)我們?cè)谀玫胶笈_(tái)的數(shù)據(jù)后，需要提取我們所需要的數(shù)據(jù)，比如label，value，具體還要根據(jù)后端提供的數(shù)據(jù)進(jìn)行提取，整理
Bcharts整理數(shù)據(jù)
用prepareData函數(shù)整理我們的數(shù)據(jù)，需要了解
Math.max.apply(null,[arg1,arg2,arg3]);兩個(gè)參數(shù)：
- null參數(shù)不改變this指向；
- [arg1,arg2,arg3]應(yīng)用Math.max方法的對(duì)象，在prepareData函數(shù)內(nèi)我們chart.values為數(shù)組，故求出最大值
畫函數(shù)
在這里讓我們將draw函數(shù)進(jìn)行細(xì)化,正如我們?cè)陂_(kāi)頭分析圖表中分析圖表構(gòu)成的元素。
細(xì)化后的函數(shù)職責(zé)單一，方便調(diào)試，更改，更加清晰。如下所示：
Bcharts1.畫x軸
通過(guò)drawX函數(shù)畫x軸：
Bcharts其中坐標(biāo)依賴我們setChartParameters函數(shù)設(shè)置的比例,也就是說(shuō)圖表坐標(biāo)0就是moveTo(60,405)，畫筆開(kāi)始的點(diǎn)
lineTo(540,405),x軸上，y軸值肯定是不變的，所以畫布寬度-比例的留白就是圖表x軸的終點(diǎn)。接下來(lái)我們給定線寬，stroke()，就好了。
2.畫y軸
通過(guò)drawY函數(shù)畫y軸:
Bcharts3.畫x軸描述文字
通過(guò)drawXLabel函數(shù)畫出x軸描述文字（一，二，三月...）:
Bcharts4.畫y軸數(shù)值
通過(guò)drawYLabel函數(shù)畫y軸，如上同理：
Bcharts5.畫水平輔助線
通過(guò)HorGuideLines函數(shù)畫x軸輔助線：
Bcharts6.畫垂直輔助線
通過(guò)verGuideLines畫垂直輔助線同理：
Bcharts7.準(zhǔn)備填充矩形隨機(jī)填充色
Bcharts8.畫矩形
通過(guò)drawBars繪制矩形
Bcharts9.調(diào)用Bcharts
varnew在此時(shí)做了兩件事情：
- 創(chuàng)建了一個(gè)新的Bcharts對(duì)象；
- 返回了一個(gè)新的Bcharts對(duì)象。
我們將返回的新的Bcharts通過(guò)var引用到chart。
打印chart我們將得到：
所以chart共享Bcharts所有屬性，方法。
思考行動(dòng)
我們從分析圖表的構(gòu)成：
- x軸；
- y軸；
- 輔助線；
- 矩形。
然后還有看不見(jiàn)的數(shù)據(jù)處理與準(zhǔn)備，最重要的我們根據(jù)比例多次依賴setChartParameters函數(shù)，一步一步將圖表完成。
比較難些的有兩個(gè)地方：
- 整理數(shù)據(jù)；
- setChartParameters函數(shù)對(duì)于圖表比例的設(shè)計(jì)。
希望大家能夠?qū)etChartParameters函數(shù)進(jìn)行比例的改變，通過(guò)自己繪畫，加強(qiáng)自己對(duì)繪制柱狀圖業(yè)務(wù)模型的了解。
在下一章節(jié)中我們開(kāi)始繪制動(dòng)態(tài)屏保，不例外也用到本章與之前的知識(shí)點(diǎn)。
總結(jié)
以上是生活随笔為你收集整理的canvas js 绘图插件_Canvas专题—绘制柱状图（2）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： epoll哪些触发模式_网络编程：epo
- 下一篇： java restful文件传输_jav