Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作し、Web ページ上に画像を描画することができます。 Baidu はオープンソースの視覚化チャート ライブラリ ECharts を開発しました。これは非常に強力で、折れ線グラフ、棒グラフ、散布図、円グラフ、ローソク足グラフ、地図など、さまざまなチャートを実現できます。多くのプロジェクトでは、チャート機能の開発に ECharts が使用されています。 このチュートリアルでは、ネイティブ js を使用して、ECharts に似た棒グラフを開発する方法を説明します。このチュートリアルを学習する前に、読者は HTML と CSS のスキルと、簡単な JavaScript の基礎知識を持っている必要があります。 ECharts の開発方法に従って、チャートは HTML 要素内に生成されます。したがって、この例では、以下に示すように、ID 名が canvasWrap である div 要素も準備します。 <div class="canvas_wrap" id="canvasWrap"></div> 次に、canvasWrap 要素内にキャンバス要素を作成し、キャンバス要素上に棒グラフを描画します。開発の前に、いつものように、まず棒グラフの具体的な操作を分析し、具体的な操作に基づいて機能を実装する方法を複数のステップに分割し、1ステップずつ完了させます。 1. 棒グラフデータを書き込む 具体的なコードは次のとおりです。 //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); このサンプル チュートリアルでは、ソース コードを読むのに多少の忍耐が必要になる場合があります。理解できない箇所に遭遇した場合は、ソース コードの理解できない箇所の値を出力すれば、理解できるかもしれません。 上記は、JS がキャンバス テクノロジを使用して echarts 棒グラフを模倣する方法の詳細です。キャンバス棒グラフを使用する JS の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: 大量のデータをMySQLにインポートする際に発生する問題と解決策の分析
>>: nginx ログを elasticsearch にインポートする方法の例
RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...
最近のプロジェクトに取り組んでいるとき、下の図に示すように、画像を参照すると常に下部に空白スペースが...
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...
私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...
Visual Studio Code は、Microsoft が開発した強力なテキスト エディター...
最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...
目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...
序文ビューは、データベース システム内で非常に便利なデータベース オブジェクトです。 MySQL 5...
基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...
秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...
目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...
SQL では、GROUP BY は SELECT の結果のデータをグループ化するために使用されます。...
目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...
背景色の点滅効果を実現するには、次のコードを <body> 領域に追加するだけです。コー...
ここで 123WORDPRESS.COM はこれらのテンプレートの最初の部分を紹介します。各テンプレ...