JSはキャンバス技術を使用してeChartsの棒グラフを模倣します

<div class="canvas_wrap" id="canvasWrap"></div>

//1 棒グラフデータを書き込むオプション = {
  //x軸データ xAxis: {
    データ: ['月', '火', '水', '木', '金', '土', '日']
  },
  //縦棒グラフデータ系列: [{
    // 異なるデータのチャート効果を確認するために、さらにいくつかのデータセットを記述します // データ: [0.01, 0.2, 0.05, 0.07, 0.04, 0.13, 0.9],
    // データ: [1, 1, 5, 7, 4, 1, 9],
    // データ: [1213, 30, 150, 80, 70, 910, 630],
    データ: [120, 199, 150, 180, 70, 110, 130],
    //グラフィックスタイル: 棒グラフタイプ: 'bar'
  }]
};

//チャート関数を作成する、 wrap: チャートの親要素ID; data: チャートのデータ function fnCharts(wrap,data){
  //2. canvasWrap 要素を取得します。 var eWrap = document.getElementById(wrap);
  //2. canvasWrap 要素の幅と高さを取得してキャンバス サイズを設定します。var nWrapW = eWrap.offsetWidth;
  var nWrapH = eWrap.offsetHeight;

  //3.1 キャンバスを作成する var eCanvas = document.createElement('canvas');
  //3.2 キャンバスの幅と高さを設定します。eCanvas.width = nWrapW;
  eCanvas.height = nWrapH;
  //3.3 キャンバスを 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のスケール線を描く
    fnCreateLine(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;
    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;
  // 小数点乗算によって発生する精度のバグを解決するために変数を宣言する
  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);
  }それ以外{
    //nStep に小数点が含まれている場合、nIncrease は 10 の sTemp - 2 乗になります。
    nIncrease = Math.pow(10,sTemp.indexOf('.')-2);
    //この変数は、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){
    nステップ += n増加*1;
  }
  // 間隔値にセグメント数を掛けて、最大スケール値 nMaxScal = nStep * nSplit を変更します。
  //y 軸の長さを計算します。ここでは、y 軸の上部にいくらかの距離を残す必要があるため、3 を減算します。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');
    もし(i!=0){
      //6.4 ゼロ以外の位置で、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,幅,高さ);
  }
}
//チャート関数を呼び出して、要素 ID とオプション データを渡します fnCharts('canvasWrap',option);