開源的可視化圖表庫ECharts，功能非常強大，可以實現折線圖、柱狀圖、散點圖、餅圖、K線圖、地圖等多種圖表。本實例教程使用原生js通過canvas技術開發一個簡單仿ECharts的柱狀圖。每一行代碼都有完整的註釋，學習本教程可以對學習canvas有一定的幫助。 ...
canvas 畫布是HTML5中新增的標簽，可以通過js操作 canvas 繪圖 API在網頁中繪製圖像。
百度開發了一個開源的可視化圖表庫ECharts，功能非常強大，可以實現折線圖、柱狀圖、散點圖、餅圖、K線圖、地圖等多種圖表。很多項目都有使用過ECharts開發過圖表功能。
本實例教程使用原生js教你開發一個仿ECharts的柱狀圖。學習本教程之前，讀者需要具備html和css技能，同時需要有簡單的javascript基礎。
按照ECharts的開發方法，圖表都是生成在一個HTML元素中。所以本實例中也先準備一個id名為canvasWrap的div元素，如下所示：
<div class="canvas_wrap" id="canvasWrap"></div>
然後在canvasWrap元素中創建canvas元素，再在canvas元素上繪製柱狀圖。開發之前，按照慣例，還是先分析柱狀圖的具體操作，再根據具體操作把實現功能的方法分成多個步驟，接下來一個步驟一個步驟去完成它。
1. 編寫柱狀圖數據
2. 獲取canvasWrap元素及寬高
3. 創建繪圖環境
3.1 創建canvas畫布
3.2 設置canvas畫布的寬度和高度
3.3 將canvas畫布放入到canvasWrap元素中
3.4 創建繪圖上下文環境
4. 設定坐標區域
5. 繪製x軸
5.1 繪製軸線
5.2 繪製刻度線
5.3 繪製刻度名稱
6. 繪製y軸
6.1 繪製軸線
6.2 繪製刻度線
6.3 繪製刻度值
6.4 繪製x軸網格線
7. 繪製柱圖
7.1 計算柱圖寬度
7.2 計算柱圖高度
7.3 計算柱圖X起點
7.4 計算柱圖Y起點
7.5 繪製柱圖
具體代碼如下：
//1 編寫柱狀圖數據 option = { //x軸數據 xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, //柱圖數據 series: [{ //多寫幾組數據，用於查看不同數據時的圖表效果 // data: [0.01, 0.2, 0.05, 0.07, 0.04, 0.13, 0.9], // data: [1, 1, 5, 7, 4, 1, 9], // data: [1213, 30, 150, 80, 70, 910, 630], data: [120, 199, 150, 180, 70, 110, 130], //圖形樣式：柱圖 type: 'bar' }] }; //創建圖表函數，wrap：圖表父元素id；data：圖表數據 function fnCharts(wrap,data){ //2.獲取canvasWrap元素 var eWrap = document.getElementById(wrap); //2.獲取canvasWrap元素寬度和高度，用於設置canvas畫布大小 var nWrapW = eWrap.offsetWidth; var nWrapH = eWrap.offsetHeight; //3.1 創建canvas畫布 var eCanvas = document.createElement('canvas'); //3.2 設置canvas畫布的寬度和高度 eCanvas.width = nWrapW; eCanvas.height = nWrapH; //3.3 將canvas畫布放入到canvasWrap元素中 eWrap.appendChild(eCanvas); //3.4 創建繪圖上下文環境(才能夠在Canvas畫布上繪製) var oCtx = eCanvas.getContext('2d'); //4.設定坐標區域左上角和右下角 //起點設置為50.5，而不是整數，是為了讓線條變清晰 var nZoneStartX = 50.5; var nZoneStartY = 50.5; var nZoneEndX = nWrapW - nZoneStartX; var nZoneEndY = nWrapH - nZoneStartY; //5.1 使用線條函數繪製x軸軸線 fnCreatLine(nZoneStartX,nZoneEndY,nZoneEndX,nZoneEndY); //計算x軸長度 var nLonX = nZoneEndX - nZoneStartX; //獲取x軸數據數組長度 var nDataLon = option.xAxis.data.length; //根據x軸數據數組長度迴圈，在迴圈中繪製刻度線和刻度數值名稱 for(let i=0;i<nDataLon;i++){ //計算出x軸刻度線起點在x軸上的值 let nScaleX = nZoneStartX+Math.floor(nLonX*(i/nDataLon)); //刻度線起點都在x軸上 let nScaleY = nZoneEndY; //5.2 繪製刻度線，長度為10 fnCreatLine(nScaleX,nScaleY,nScaleX,nScaleY+10); //從數據中獲取刻度名稱字元串 let sName = option.xAxis.data[i]; //計算出刻度名稱起點 let nNameX = nZoneStartX+Math.floor(nLonX*(i/nDataLon))+Math.floor(nLonX*(1/nDataLon))/2; let nNameY = nZoneEndY+15; //5.3 繪製刻度名稱 fnCreatText(sName,nNameX,nNameY,'#aaa','center'); } //6.1 使用線條函數繪製y軸軸線 fnCreatLine(nZoneStartX,nZoneEndY,nZoneStartX,nZoneStartY); //繪製y軸刻度線前，需要有刻度最大值、最小值、刻度線段數和刻度線之間的間隔這些數據。 //刻度最大值先從數組中取最大值，等下再計算應該顯示的最大值 var nMaxScal = Math.max.apply(null,option.series[0].data); //刻度最小值在本實例中取0 var nMinScal = 0; //刻度線段數在本實例中設置為4 var nSplit = 4; //計算刻度間隔值 var nStep = (nMaxScal-nMinScal)/nSplit; //這時候會發現刻度間隔值好像有點奇怪，因為一般圖表的刻度間隔值都是5的倍數， //比如:[0,0.5,1.0,1.5,2]或[0,50,100,150,200]。 //所以還需要進一步計算，看nStep是否是5的倍數，如果不是，則遞增nIncrease，使其達到最接近的5的倍數。 //計算第一步，根據nStep算出倍數值應該是0.5或5或50或... //在本實例中通過把nStep數值先轉換為字元串再進行處理(也可以使用對數和指數去計算)。 var sTemp = '' + nStep; //把nStep轉換為字元串 //聲明一個需要遞增的數,預設為1 var nIncrease = 1; //聲明一個變數用於解決小數相乘產生的精度bug var nTempMultiple = 1; //nIncrease取10的n次冪，通過以下判斷計算 if(sTemp.indexOf('.')==-1){ //如果nStep不包含小數點，nIncrease取10的sTemp.length-2次冪。 //比如nStep為19的話，nIncrease = 10的0次冪，遞增數為1 //nStep為9的話，nIncrease = 10的-1次冪，遞增數為0.1 //nStep為199的話，nIncrease = 10的1次冪，遞增數為10 nIncrease = Math.pow(10,sTemp.length-2); }else{ //如果nStep包含小數點，nIncrease取10的sTemp整數位-2次冪。 nIncrease = Math.pow(10,sTemp.indexOf('.')-2); //這個變數用於解決小數相乘可能產生的精度bug，比如nIncrease是小數的情況 nTempMultiple = Math.pow(10,sTemp.indexOf('.')); } //倍數取整，便於遞增，如165改成160，16.5改成16，1.65改成1.6，可通過下列公式實現 nStep = Math.ceil(nStep/nIncrease)*(nIncrease*nTempMultiple)/nTempMultiple; //使用迴圈遞增nIncrease修正刻度值 while(nStep%(nIncrease*5)!=0){ nStep += nIncrease*1; } //通過間隔值乘以線段數，修改刻度最大值 nMaxScal = nStep * nSplit; //計算y軸長度，這裡多減3是因為y軸頂端要留點距離 var nLonY = nZoneEndY - nZoneStartY - 3; //繪製y軸刻度 for(let i=0;i<=nSplit;i++){ //刻度線起點都在y軸上 let nScaleX = nZoneStartX; //計算出y軸刻度線起點在y軸上的值 let nScaleY = nZoneEndY-Math.floor(nLonY*(i/nSplit)); //6.2 繪製刻度線 fnCreatLine(nScaleX,nScaleY,nScaleX-10,nScaleY); //6.3 繪製刻度值 fnCreatText(''+i*nStep,nScaleX-20,nScaleY,'#333'); if(i!=0){ //6.4 非0位置，繪製x軸網格線 fnCreatLine(nScaleX,nScaleY,nScaleX+nLonX,nScaleY,'#ccc'); } } //7.1 計算柱圖寬度 let nBarWidth = Math.ceil(Math.floor(nLonX*(1/nDataLon))*.8); //遍歷x軸數據 for(let i=0;i<nDataLon;i++){ //7.2 計算柱圖高度 let nBarHeight = nLonY/nMaxScal*option.series[0].data[i]; //7.3 計算柱圖X起點 let nBarStartX = nZoneStartX+Math.floor(nLonX*(i/nDataLon)) +(Math.floor(nLonX*(1/nDataLon))-nBarWidth)/2; //7.4 計算柱圖Y起點 let nBarStartY = nZoneEndY-nBarHeight; //7.5 繪製柱圖 fnCreatRect(nBarStartX,nBarStartY,nBarWidth,nBarHeight); } //繪製線條函數 function fnCreatLine(sX,sY,eX,eY,color='#000'){ //開始繪製路徑 oCtx.beginPath(); //設置路徑顏色 oCtx.strokeStyle = color; //設置路徑起點和終點，繪製線條 oCtx.moveTo(sX,sY); oCtx.lineTo(eX,eY); //給路徑添加顏色 oCtx.stroke(); } //繪製文字 function fnCreatText(text,x,y,color='#000',align='end',baseLine='middle'){ //設置文字顏色 oCtx.fillStyle = color; //設置水平對齊方式 oCtx.textAlign = align; //設置垂直對齊方式 oCtx.textBaseline = baseLine; //繪製文字 oCtx.fillText(text,x,y); } //繪製矩形 function fnCreatRect(x,y,width,height,color='#a00'){ //設置顏色 oCtx.fillStyle = color; oCtx.fillRect(x,y,width,height); } } //調用圖表函數，並傳入元素id和option數據 fnCharts('canvasWrap',option);
這篇實例教程可能需要點耐心去讀源碼，如果碰到不明白的地方，可以在不明白的源碼位置輸出值，也許能豁然開朗。
