vue 外科麻酔シングルアダプティブハンド麻酔チャート BS プラットフォーム

手術用麻酔ドレープ

ここに画像の説明を挿入します
タイトルでは vue を使用していますが、麻酔オーダーは D3 を使用して開発されており、生成ロジックはフロントエンドフレームワークに依存しないため、麻酔オーダーは vue フレームワークに限定されません。必要なパラメータを渡して直接インスタンス化するだけです。

オンライン体験アドレス：https://2guliang.top/temperture/anesthesia。

オンライン体験

下部のポリラインポイントはドラッグ可能です。

役に立った場合は、「開始」をクリックしてください。ペンギン: 1534815114

特徴

グラフデータはビューにバインドされているため、再描画メソッドを呼び出すだけで、更新せずにデータを更新できます。
アダプティブ描画。コードは相対単位を使用して開発されているため、任意のサイズに適応して表示できます。
強力な拡張性。すべての位置はデータに基づいて計算されるため、フィールドを変更することでカスタマイズを変更できます。

コアコードは src/components/chart.js にあります。インターフェイスのドキュメントについては、out/global.html ファイルを参照してください。

説明書

src/chart.vue ファイルを参照してください。

1. コンポーネントの紹介

new Chart({
  el: 'chart-content',
  // 传入事件函数
  callBack: {
    onBrokenline: this.onBrokenline.bind(this),
    onlineClick: this.onlineClick.bind(this),
    onlineChartClick: this.onlineChartClick.bind(this),
    tootipShow: this.changeTootip.bind(this),
    lineUpdate: debounce(this.onDataChange.bind(this), 100),
  },
  // 传入数据
  data,
})

2. データを更新する

updateData() {
  this.cur = !this.cur
  if (this.cur) {
    this.chart.reRender(dataNew)
  } else {
    this.chart.reRender(data)
  }
}

reRender メソッドを呼び出し、新しいデータを渡してページを更新します。

3. 変更された新しいデータを取得する
lineUpdate コールバックパラメータは、変更されたデータを返します。

チャートの構成

constructor(options) {
    const { el, data, callBack } = options
    const margin = { top: 0, right: 0, bottom: 0, left: 0 }
    this.callBack = callBack
    // start 做全局变量使用
    this.currentItem = null
    this.lastYear = null
    this.zoomK = 1
    // end 做全局变量使用
    // 配置数据
    this.config = {
      margin,
      // 表头高度
      headerLineHeight: 24,
      lineHeight: 20,
      //折线行高
      lineChartHeight: 28,
      // 左侧文字宽度
      leftTextWidth: 25,
      // 格子数量
      rowCount: 25,
      // 总行数
      lineCount: 18,
      //麻醉用药行数
      toplineCount: 10,
      // 折线总行数
      lineChartCount: 11,
      rowWidth: 28,
      preRow: 110,
      afterRow: 90,
      width: 900 - margin.left - margin.right,
      height: 900 - margin.top - margin.bottom,
      // 点图行高
      pointLineHeight: 80,
    }
    // 存储D3对象
    this.element = {
      updateLine: [],
    }
    this.data = JSON.parse(JSON.stringify(data))
    this.preprocessData()
    this.init(el)
    this.initMark()
    this.drawAxis()
    this.drwaBg()
    this.drawText()
    this.loadTopData()
    this.bottomData()
  }

constructor(options)このメソッドは、Surgical Anesthesia Single Chart クラスのコンストラクターを作成することです。このメソッドは、optionsチャートの構成、データ、およびコールバック関数を初期化するために使用されるパラメーターを受け取ります。

コンストラクターの主な機能は次のとおりです。

optionsオブジェクトを構造化し、 el、data、およびcallBackパラメータを取得します。elチャートの指定に使用される DOM 要素はチャートdataのデータソースであり、callBack特定のイベントが発生したときに実行できるコールバック関数です。
デフォルトのmarginオブジェクトを定義し、グラフの上、右、下、左の余白を設定します。
currentItem、lastYear、などのいくつかのグローバル変数を初期化しますzoomK。これらの変数は、後続のチャートの描画および更新プロセスで使用されます。
行の高さ、テキストの幅、セルの数など、グラフのさまざまなサイズとスタイルのパラメーターを構成します。これらの構成は、グラフのレイアウトと外観に影響します。
elementD3 オブジェクトを格納するために名前を付けたオブジェクトを初期化します。たとえば、updateLine配列は、更新する必要がある折れ線グラフ要素を格納するために使用されます。
入力データをディープコピーし、データを前処理して、データの正確性と互換性を確保します。
init()指定された DOM 要素を使用してチャートコンテナーを初期化するメソッドを呼び出します。
メソッドを呼び出してinitMark()、使用するアイコンを初期化します。
drawAxis()X 軸を描画するメソッドを呼び出します。
drwaBg()メソッドを呼び出して背景線を描画します。
drawText()メソッドを呼び出して背景の静的テキストを描画します。
loadTopData()データに基づいてデータコンテンツの上半分を描画するメソッドを呼び出します。
bottomData()メソッドを呼び出して下部データを描画します。

インスタンスを作成すると、コンストラクターが自動的に呼び出され、チャートの初期化と基本的な描画が完了します。後で、インスタンスメソッドを通じてチャートを更新および操作できます。

チャート方式

視覚化された外科麻酔チャート、具体的な方法は次のとおりです。

コンテナの初期化: init(query) メソッドを使用すると、DOM セレクターを通じてチャートコンテナを初期化できます。この手順はチャートを作成する前に必要です。
データの前処理: preprocessData() メソッドを使用して、チャートデータを前処理します。これは、データの正確性と互換性を確保するのに役立ちます。
背景の描画: drwaBg() メソッドを使用して、すべての背景線を描画します。これは、美しくきれいなグラフを作成するのに役立ちます。
X 軸を描画する: X 軸を描画するには、drawAxis() メソッドを使用します。これは、チャートにおける時間の基本的な表現です。
タイムラインを描画する: renderX() メソッドを使用して X タイムラインを描画します。これにより、時間関連の情報がチャートに表示されます。
背景の静的テキストを描画する: 背景の静的テキストを描画するには、drawText() メソッドを使用します。これは、グラフにさらに多くの情報を提供するのに役立ちます。
上部データのロード:loadTopData() メソッドを使用して、データに基づいてチャートの上半分のデータコンテンツを描画します。
下部のデータをプロットする:bottomData() メソッドを使用して、グラフの下部にデータをプロットします。
アイコンの初期化: initMark() メソッドを使用して、使用するアイコンを初期化します。これは、グラフ内にデータ関連のアイコンを表示するのに役立ちます。
グラフデータ全体を再描画する: reRender(data) メソッドを使用して、新しいデータに基づいてグラフ全体を再描画します。
上部のデータを再描画する: reRenderTopData() メソッドを使用して、チャートの上半分のデータを再描画します。
下部のデータを再描画する: reRenderBottom(content, data) メソッドを使用して、グラフの下部のデータを再描画します。
長方形領域にテキストを追加する: addTextInRect(param0) メソッドを使用して、長方形領域に基づいてテキストを垂直方向の中央に配置します。
ダイナミックテキストの描画: addTextInRectByData(param0) メソッドを使用してダイナミックテキストを描画します。
Y 軸ラベルを設定する: setLabelYaxis(content, sacle, gap, transform, title, color) メソッドを使用して、Y 軸にラベルを設定します。スケール、間隔、オフセット、タイトル、テキストの色を割り当てることができます。
太字のタイムライン: utils_boldLine() メソッドを使用してタイムラインを太くします。これは、タイムライン上の重要なイベントを強調するのに役立ちます。
時間範囲内のノードを計算する: getTimeRange(start, end) メソッドを使用して、開始時刻と終了時刻の間のノードを計算します。これは、チャート上の時間間隔を決定するのに役立ちます。
一連の数値を生成する:generateNumberSequence(target, step) メソッドを使用して、間隔に基づいて配列を生成します。これは、グラフ内に規則的な数値シーケンスを作成するのに役立ちます。
データのグループ化: データをグループ化するには、groupBy(data) メソッドを使用します。これにより、さまざまなカテゴリのデータをグラフ内でより明確に表示することができます。

いくつかのソースコードのスクリーンショット

ここに画像の説明を挿入します