JS怎么使用canvas技術模仿echarts柱狀圖

這篇文章主要介紹JS怎么使用canvas技術模仿echarts柱狀圖，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

JavaScript是什么

JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。

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

以上是“JS怎么使用canvas技術模仿echarts柱狀圖”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！