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 をよろしくお願いいたします。

以下もご興味があるかもしれません: