早速ですが、デモ画像をご紹介します。実装されている機能は、左側に凡例、右側にウォーターフォール チャート、マウスを動かすと現在の座標に対応するデータ情報がポップアップ表示されるというものです (最適化の余地がありますので、ぜひ試してみてください)。 イラストで使用されているプラグインnpmプラグインcolormapをインストールすることをお勧めします ウォーターフォールチャート本体ここでは説明しません。すべてネイティブタグと Vue バインドイベントです。実際のプロジェクトの状況に応じてコンポーネントにカプセル化できます。ここではまとめて記述しました。 <テンプレート> <div> <div class="content"> <div class="neirong"> <!--凡例--> <div class="凡例"> <canvas ref="凡例"></canvas> </div> <!--ウォーターフォール チャート--> <div class="waterFall" ref="waterFallContent" @mousemove="waterFallMove($event)" @mouseleave="waterFallLeave" > <canvas ref="滝"></canvas> <!--マウスをポップアップ ボックス内に移動します--> <div ref="tip" class="tip"></div> </div> </div> </div> </div> </テンプレート> 使用されたデータはこちら
<スクリプト> エクスポートデフォルト{ 名前: "インデックス", データ() { 戻る { カラーマップ: [], 凡例: null、 ウォーターフォール: null、 滝リスト: [], 滝インデックス: 0, waterFallCopyList: [], 降水間隔: null、 滝幅: 0, 滝の高さ: 0, 最大数: 10, 最小数: 0 } }, 以下は具体的な方法です。ざっくりと書いていますが、よく読んでみてください。役に立ったと思ったら、ぜひ取り入れてください。足りないところがあれば、自由に改変していただいて構いません。 ここではメソッド呼び出しについては説明しません。ページを離れるとタイマーが破壊されます。 マウント() { dx = thisとする dx.setColormap() dx.createLegendCanvas() dx.queryChartList() }, 破壊された() { dx = thisとする クリア間隔(dx.waterFallIntervals) }, カラーライブラリを作成する詳細は上記プラグインの公式サイトにて詳しく紹介しておりますのでご参照ください。 setColormap() { dx = thisとする colormap = require('colormap') とします。 dx.colormap = カラーマップ({ カラーマップ: 'ジェット', シェード数: 150, フォーマット: 'rba', アルファ: 1, }) }, 伝説を創る凡例キャンバスを作成します(){ dx = thisとする legendRefs = dx.$refs.legend とします。 dx.legend = legendRefs.getContext('2d') legendCanvas = document.createElement('canvas') とします。 凡例キャンバスの幅 = 1 legendCanvasTemporary = legendCanvas.getContext('2d') とします。 const imageData = legendCanvasTemporary.createImageData(1, dx.colormap.length) (i = 0 とします; i < dx.colormap.length; i++) { 定数カラー = dx.カラーマップ[i] imageData.data[imageData.data.length - i * 4 + 0] = color[0] imageData.data[imageData.data.length - i * 4 + 1] = color[1] imageData.data[imageData.data.length - i * 4 + 2] = color[2] imageData.data[imageData.data.length - i * 4 + 3] = 255 } legendCanvasTemporary.putImageData(imageData, 0, 0) dx.legend.drawImage(legendCanvasTemporary.canvas, 0、0、1、dx.colormap.length、50、0、200、dx.legend.canvas.height) }, ウォーターフォールチャートの作成ウォーターフォールキャンバスを作成します(){ dx = thisとする waterFall = dx.$refs.waterFall とします dx.waterFall = waterFall.getContext('2d') 滝の幅 = dx.滝の幅 waterFall.height = dx.$refs.waterFallContent.offsetHeight }, 1本の線で画像を描くrowToImageData(データ) { dx = thisとする dx.$refs.waterFallContent が未定義の場合 { canvasHeight = Math.floor(dx.$refs.waterFallContent.offsetHeight / dx.waterFallHeight) とします。 imgOld = dx.waterFall.getImageData(0, 0, dx.waterFallWidth, canvasHeight * dx.waterFallIndex + 1) とします。 const imageData = dx.waterFall.createImageData(data.length, 1) (i = 0、i < imageData.data.length、i += 4 とします) { 定数 cindex = dx.colorMapData(データ[i / 4], 0, 130) 定数 color = dx.colormap[cindex] imageData.data[i + 0] = 色[0] imageData.data[i + 1] = 色[1] imageData.data[i + 2] = 色[2] 画像データ.data[i + 3] = 255 } (i = 0; i < canvasHeight; i++ とします) { dx.waterFall.putImageData(イメージデータ, 0, i) } dx.waterFall.putImageData(imgOld, 0, キャンバスの高さ) } }, データに対応するカラーマップの色を返しますcolorMapData(データ、outMin、outMax) { dx = thisとする データ <= dx.minNum の場合 { 戻り値 outMin } そうでない場合 (データ >= dx.maxNum) { 戻り値 outMax } Math.round(((data - dx.minNum) / (dx.maxNum - dx.minNum)) * outMax) を返します。 }, マウスをウォーターフォールチャートに移動するwaterFallMove(イベント) { dx = thisとする dataWidth = (dx.$refs.waterFallContent.offsetWidth / dx.waterFallWidth).toFixed(2) とします。 dataHeight = (dx.$refs.waterFallContent.offsetHeight / dx.waterFallHeight).toFixed(2) とします。 x = Math.floor(event.offsetX / dataWidth) とします。 y = Math.floor(event.offsetY / dataHeight) とします。 試す { dx.$refs.tip.innerHTML = '値:' + JSON.parse(JSON.stringify(dx.waterFallCopyList[y][x])) xx = イベント.オフセットX + 5 とします。 yy = event.offsetY - 20 とします。 イベントオフセットX > 1300の場合{ xx = イベント.オフセットX - 160 yy = イベント.オフセットY - 20 } dx.$refs.tip.style.position = '絶対' dx.$refs.tip.style.left = xx + 'px' dx.$refs.tip.style.top = yy + 'px' dx.$refs.tip.style.display = 'ブロック' } キャッチ (e) { dx.$refs.tip.style.display = 'なし' } }, マウスをウォーターフォールチャートの外に移動しますウォーターフォールリーブ() { dx = thisとする dx.$refs.tip.style.display = 'なし' }, ウォーターフォールチャート偽データシミュレーションクエリチャートリスト() { dx = thisとする dx.waterFallWidth = 1500 dx.waterFallHeight = 30 データ = [] (i = 0; i < 1500; i++) の場合 { data.push(Math.floor(Math.random() * (20 - 1)) + 1) } dx.waterFall === nullの場合{ dx.createWaterFallCanvas(データの長さ) } dx.rowToImageData(データ) dx.waterFallCopyList.unshift(データ) dx.waterFallIndex++ dx.waterFallIndex > dx.waterFallHeight の場合 { dx.waterFallCopyList.pop() } dx.waterFallIntervals = setTimeout(() => { dx.queryChartList() }, 1000) }, スタイルコード .neirong { 幅: 1800ピクセル; 高さ: 100%; マージン: 80px 自動; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; } 。伝説 { 幅: 25px; 高さ: 500px; } キャンバス { 幅: 100%; 高さ: 100%; } .滝 { 幅: 1500ピクセル; 高さ: 500px; 位置: 相対的; } 。ヒント { ポインタイベント: なし; 表示: なし; 背景色: #0404049e; 境界線の半径: 10px; 色: #fff; パディング: 10px; ボックスのサイズ: 境界線ボックス; } この時点で、デモは基本的にエラーなしで実行できます。コードはあまり高度ではありません。私も初心者で、記事を書くのは今回が初めてです。大物たちが私にもっと良い提案をしてくれることを期待し、一生懸命勉強します。また、同じような要件に直面し、アイデアがない友人たちが、穴に足を踏み入れた私の経験から学び、より早く成長できることを願っています。 これで、vue+canvas がウォーターフォール チャート効果 (QT に類似) を上から下へリアルタイム データ更新する方法についてのこの記事は終了です。vue+canvas のリアルタイム更新ウォーターフォール チャートに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Mysql 5.7.18 MySQL proxies_priv を使用して同様のユーザーグループ管理を実装する
>>: Docker で Tomcat を使用して Web アプリケーションを迅速にデプロイする方法の例
jquery-multiselect (ドロップダウン ボックスをチェックボックス付きの複数選択コン...
目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...
この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
以前、MySQLがローカルでは接続できるのにリモートでは接続できないという問題に遭遇したことがありま...
社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...
MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...
目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...
目次序文異なるコンピュータ上の 2 つの Node.js プロセス間の通信TCPソケットの使用HTT...
まず、CSS3 Api の position 属性の定義を見てみましょう。 static: 特別な配...
適用シナリオ:新しい要件の 1 つはアンケート調査を行うことですが、必然的に多くの質問が含まれ、1 ...
EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...
目次行と列の変換トランスクリプトの構成を分析するvue3 + el-table で作成されたトランス...
目次1. マップされた型2. マッピング修飾子3. キーの再マッピング4. さらなる探究序文: Ty...
序文この記事では、CSS3アニメーションを使用して、円が小さいものから大きく拡大し、外側に広がる効果...
インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...