早速ですが、デモ画像をご紹介します。実装されている機能は、左側に凡例、右側にウォーターフォール チャート、マウスを動かすと現在の座標に対応するデータ情報がポップアップ表示されるというものです (最適化の余地がありますので、ぜひ試してみてください)。 イラストで使用されているプラグイン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 アプリケーションを迅速にデプロイする方法の例
概要es6 では、配列またはオブジェクトから指定された要素を取得する新しい方法が追加されました。これ...
参考までに、Vue3でナビゲーションバーコンポーネントをカプセル化し、スクロールバーのスクロールに合...
この記事では、Windows プラットフォームで ogg プログラムを監視する方法を紹介します。 (...
目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...
目次1. はじめに2. axiosインターセプターを使用してフロントエンドログを出力する1. はじめ...
目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...
目次1. はじめに2. es5メソッド3. 非同期関数のシリアル実行4. 非同期関数の並列実行5. ...
パート0 背景社内のイントラネットサーバーは直接インターネットにアクセスすることはできませんが、外部...
目次導入質問設計 1: 隣接リストテーブルデザインSQL の例デザイン 2: パスの列挙テーブルデザ...
前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...
この記事では、参考までに、NFC読み取り機能を実装するためのuni-appの具体的なコードを紹介しま...
最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...
この効果は、2つのブラウザが互いにシミュレートしていることを示しています 1. シミュレートされたノ...
目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...
目次1. Tencent Cloud Serverに接続する2. 環境整備Jenkinsのデプロイメ...