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 アプリケーションを迅速にデプロイする方法の例

推薦する

jquery-multiselect を使用した IE6 のバグの解決方法

jquery-multiselect (ドロップダウン ボックスをチェックボックス付きの複数選択コン...

React Native APPのアップデートに関する簡単な説明

目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...

カレンダー効果を実現するJavaScript

この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

MySQLリモート接続失敗の解決策

以前、MySQLがローカルでは接続できるのにリモートでは接続できないという問題に遭遇したことがありま...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...

MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル

MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...

HarborをベースにしたDocker専用倉庫の構築方法

目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...

2つのNode.jsプロセスがどのように通信するかの詳細な説明

目次序文異なるコンピュータ上の 2 つの Node.js プロセス間の通信TCPソケットの使用HTT...

CSS の位​​置属性 (absolute|relative|static|fixed) の概要と応用

まず、CSS3 Api の position 属性の定義を見てみましょう。 static: 特別な配...

CSS スティッキーレイアウトを使用してヘッダーを上部に配置する方法

適用シナリオ:新しい要件の 1 つはアンケート調査を行うことですが、必然的に多くの質問が含まれ、1 ...

mysql explain(分析インデックス)の使い方の詳しい説明

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

Vue3+el-tableは行と列の変換を実現します

目次行と列の変換トランスクリプトの構成を分析するvue3 + el-table で作成されたトランス...

TypeScript マッピング型の詳細

目次1. マップされた型2. マッピング修飾子3. キーの再マッピング4. さらなる探究序文: Ty...

CSS3アニメーションを使用して、小さい円から大きい円に拡大し、外側に広がる効果を実現する例

序文この記事では、CSS3アニメーションを使用して、円が小さいものから大きく拡大し、外側に広がる効果...

Vue での this.$set の動的データバインディングのケーススタディ

インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...