Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)

Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)

早速ですが、デモ画像をご紹介します。実装されている機能は、左側に凡例、右側にウォーターフォール チャート、マウスを動かすと現在の座標に対応するデータ情報がポップアップ表示されるというものです (最適化の余地がありますので、ぜひ試してみてください)。

イラストで使用されているプラ​​グイン

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>
</テンプレート>

使用されたデータはこちら

  • カラーマップ: カラーライブラリ
  • 伝説: 伝説
  • waterFall: ウォーターフォールチャート
  • waterFallList: ウォーターフォール チャートのソース データ
  • waterFallIndex: ウォーターフォール チャート タイマーで使用されるカウント インデックス
  • waterFallCopyList: ウォーターフォール チャートの 2 次元配列 (表示データの一時保存に使用)
  • waterFallIntervals: 滝タイマー
  • waterFallWidth: ウォーターフォール チャートの幅 (バックエンドから返されるデータの長さ)
  • waterFallHeight: 滝の高さ(レンダリング回数としても理解できます。たとえば、30 回のレンダリングが完了します)
  • maxNum: 凡例の最大値
  • minNum: 凡例の最小値
<スクリプト>
    エクスポートデフォルト{
        名前: "インデックス",
        データ() {
            戻る {
                カラーマップ: [],
                凡例: 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue2.0/3.0双方向データバインディングの実装原理の詳細説明
  • vuexの強制リフレッシュによるデータ損失問題の分析
  • Vue はデータの変更をどのように追跡しますか?
  • Vueデータ割り当て問題の解決
  • Vueはデータを初期状態にリセットします
  • Vue コンポーネント値転送中のデータ損失の分析と解決
  • SpringBoot+Vueでデータ追加機能を実現
  • 手書きの Vue2.0 データハイジャックの例
  • Vueデータ双方向バインディング実装方法
  • Vueでデータを読み取るためにこれを悪用しないでください
  • Vue でデータコレクターを設計する

<<:  Mysql 5.7.18 MySQL proxies_priv を使用して同様のユーザーグループ管理を実装する

>>:  Docker で Tomcat を使用して Web アプリケーションを迅速にデプロイする方法の例

推薦する

JS ES6における構造化分解についてお話しましょう

概要es6 では、配列またはオブジェクトから指定された要素を取得する新しい方法が追加されました。これ...

Vue3ナビゲーションバーコンポーネントのカプセル化実装方法

参考までに、Vue3でナビゲーションバーコンポーネントをカプセル化し、スクロールバーのスクロールに合...

Zabbix を使用して ogg プロセスを監視する (Windows プラットフォーム)

この記事では、Windows プラットフォームで ogg プログラムを監視する方法を紹介します。 (...

vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...

Vue3はフロントエンドのログを出力するためにaxiosインターセプターを使用する

目次1. はじめに2. axiosインターセプターを使用してフロントエンドログを出力する1. はじめ...

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

JavaScript におけるシリアル操作と並列操作

目次1. はじめに2. es5メソッド3. 非同期関数のシリアル実行4. 非同期関数の並列実行5. ...

nginxリバースプロキシのyum設定の詳細な手順

パート0 背景社内のイントラネットサーバーは直接インターネットにアクセスすることはできませんが、外部...

MYSQL の 3 つのツリー構造テーブル設計の長所と短所の簡単な分析と共有

目次導入質問設計 1: 隣接リストテーブルデザインSQL の例デザイン 2: パスの列挙テーブルデザ...

異なるインデックスを更新してMySQLのデッドロックルーチンを解決する

前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...

uni-appがNFC読み取り機能を実装

この記事では、参考までに、NFC読み取り機能を実装するためのuni-appの具体的なコードを紹介しま...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

VueはWebSocketを使用してチャット機能をシミュレートします

この効果は、2つのブラウザが互いにシミュレートしていることを示しています 1. シミュレートされたノ...

Angular 依存性注入の説明

目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...

Tencent Cloud Server での Jenkins の設定方法の詳細

目次1. Tencent Cloud Serverに接続する2. 環境整備Jenkinsのデプロイメ...