JSはcanvas技術を使ってechartsヒストグラムを真似します。

canvasキャンバスはhttml 5に新たに追加されたラベルで、jsを通じてcanvasを操作してAPIを描いてウェブページに画像を描くことができます。
Baiduは開源の可視化図表庫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キャンバスを作成する
3.2キャンバスの幅と高さを設定する
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ヒストグラムの詳しい内容を模倣しました。JSがcanvasヒストグラムを使用することについての資料は他の関連記事に注目してください。