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