要約: この記事は元々、Grape City の技術チームによって CSDN に公開されたものです。転載元を明記してください:グレープシティ公式ウェブサイト、グレープシティは、開発者に力を与えるための専門的な開発ツール、ソリューション、サービスを開発者に提供します。
序文
皆さんも現場でフローチャートをよく使うと思いますが、インターネット業界では、製品の設計段階から、その後の業務プロセスの最適化段階まで、フローチャートを描くことが非常に重宝されています。実は、フローチャートはインターネット業界に限らず、あらゆる分野で広く使われているのです。
例えば、銀行が口座開設業務を行う場合、資料の確認や伝票の印刷などの決まった手順だけでなく、口座開設の有無などの判断条件もあり、比較的複雑なプロセスとなります。金額が 200,000 を超える場合、パスワードの引き出しを証明する必要があるかどうかなど。このとき、フローチャートを使用して全体のビジネス フローを明確に示すことができます。
別の例として、新入社員のトレーニング中に複数の部門間でコラボレーションが行われる場合があるため、フローチャートを使用して、従業員がその後のトレーニング手順を理解するのを助けることもできます。
別の例を挙げると、インターネット業界では、プロジェクトをオンライン化する前に完全なテストを実行する必要があり、テストはブラック ボックス、ホワイト ボックス、スモーク テストなどのさまざまな種類に分かれて実行されます。手順に従って、対応するテストレポートが生成されます。テストのステップの 1 つが失敗した場合は、R&D に通知してバグを修正し、再テストする必要があります。以下のフローチャートは、R&D、製品、テストの連携プロセスを明確に示しています。
非常に多くの業界でフローチャートが使用されている理由は、次のような利点があるためです。
1. 複雑なプロセスを理解しやすくする。
2. ビジネスのボトルネックを特定し、既存のプロセスを改善するのに便利です。
3. 他の人にビジネスを説明しやすい。
また、SpreadJS (当社の製品、フロントエンドのオンライン Excel テーブル) もフローチャートの挿入をサポートしていますが、自分でフローチャートを描画したくない場合がありますが、特定のデータ構造とこのデータに基づいてフローチャートを自動的に生成したい場合があります。サーバー側で自動的に結合されることも、他のサードパーティ サービスのデータを直接結合することもできます。データがフロントエンドに送信されると、フローチャートが自動的に生成され、フローチャートに特定の変更が加えられると、それに応じてデータも変更されるため、フローチャート内のデータを将来の使用のために保存することもできます。
現在、このようなデータ構造があるとします（一部のデータは省略しています）。
このうち、Elements 配列はすべてのプロセスを保存し、id はプロセスの一意の ID 値、text はプロセス ボックス内のテキストを表し、type は通常のプロセスの長方形フレームか意思決定ダイヤモンド フレームかを表します。 ; process は現在のプロセスの進行状況を表し、将来の開始済み、進行中、および完了に分けられ、デフォルトでは開始されていません; width と height は図形の幅と高さを表し、省略できます。
エッジ配列には各処理間の接続関係が含まれており、フローチャート中の矢印はソースからターゲットへ、フラグは意思決定プロセスの結果を表します。
最後に、SpreadJS でこのようなフローチャートを生成したいと思います。
では、どうすればそのような効果が得られるのでしょうか？おおよそ以下のような作業が必要になると思います。
1.要素の情報に従ってすべてのフローチャートの図形をSpreadJSに挿入します
2. エッジの接続関係に従って、各形状を正しい位置に配置します
3. 図形間の接続を作成する
4. モニタリングを追加し、プロセスが変更されたときにデータを動的に変更します
実装手順
次に、上記の 4 つのステップを実装する方法について説明します。
1.要素の情報に従ってすべてのフローチャートの図形をSpreadJSに挿入します
この手順は比較的単純で、要素を走査して現在のシートに図形を挿入するだけです。
データ内の情報を使用して、幅、高さ、背景色などの形状のスタイルを変更します。
ここでは、シェイプに ID を掛けて、ID を通じて対応するシェイプまたはデータ モデルを見つけることができます。
さらに、読者は、プロセスの次または上のレベルを見つけるのに便利なように、next と prev という 2 つの関数をデータ モデルに実装していることに気づくでしょう。これら 2 つの関数は将来頻繁に使用されることになります。
これを実行すると、SpreadJS のシェイプが生成されます。
2. エッジの接続関係に従って、各形状を正しい位置に配置します
このステップはさらに難しいです。フローチャートが左から右に広がっていると仮定すると、横軸 (x 方向) の位置はよく決まります。奥に進むたびに、横軸は右に移動します。これは難しいです。縦座標 (y 方向) の位置の計算。私はレンガを投げて翡翠を引き寄せるためにここにいます。より良いアルゴリズムがある場合は、コメント領域で共有できます~
一般的な考え方は次のとおりです: 下の図の構造を参照してください。左図と右図では、A からのノード B と C の縦方向の位置が異なります。これは、左図のノード B にはより多くの子ノードがあるためです。一方、右側の図には子ノードが多く、子ノードが少ないため、後続のノードを配置するには左側を垂直方向にさらに開く必要があります。
もちろん、これは子ノードの数だけを指すのではなく、子ノードが占める高さ、つまり兄弟ノードの数に依存します。したがって、コードでは、後続のノードの高さの値を再帰的に計算する必要があります。
このうち hasCountMax の値は A→B→A などのノードループを防ぐためのもので、コード内にも同様の処理があります。
ノードの高さの値を取得した後、位置を計算できます。高さの値が大きいほど、親ノードからの垂直距離が遠くなります。もちろん、現在のノードが占める兄弟ノードの数だけでなく、親、兄弟ノードの高さ:
最終的なコードでは、これも再帰的な計算であり、各ノードの次のレベルの位置を計算する必要があることがわかります。
3. 図形間の接続を作成する
このステップの考え方は少し複雑ですが、実装は比較的簡単です。
難しいのは主に接続点の位置を決定することです。長方形とひし形の両方に接続点が 4 つあります。下図では、左 2 を右 2 に接続するのが最良の方法ではありません。次の 3 つの方法が望ましいです: 左 2 右 1、左 3 右 1、左3 右 0, したがって、2 つの図形の位置関係に応じて接続点を決定する必要があります。
ここでは中学レベルの数学の知識を使用します。開始形状からターゲット形状の中心位置までの接続線と、水平軸との角度の正弦値を計算して接続点を決定する必要があります。
ここには合計 12 の状況があるため、1 つずつ説明しません。
意思決定図の接続線も、「はい」と「いいえ」の 2 つの異なる状況を示す必要があります。接続線の中心点を計算して、形状を挿入するだけです。
4. モニタリングを追加し、フローチャートが変更されたときにデータを動的に変更します
ユーザーはいつでもフローチャートをドラッグでき、フローチャートの変更属性は大まかに次のとおりです: 位置、長さと幅、およびテキスト属性。次に復元する際の便宜のために、最新の値を記録する必要があるからです。時間。また、位置や長さ、幅が変更された場合、接続も自動的に更新されます。上記の「はい」と「いいえ」のテキストの位置も更新する必要があります。ここでは、手ぶれ補正モードを使用して改善します。パフォーマンス。
さらに、プロセスのステータスを変更したり、フローチャートを画像としてエクスポートしたり、フローチャートのデータ モデルを印刷したりできる新しいメニューをデザイナーにいくつか追加しました。興味のある読者はソースで確認してください。コード 実現するメソッド。
ここでは、フローチャートを変更した後、データを同期的に変更する機能を「置換」を例に説明します。デフォルトでは、置換後のデータは次のようになります。
上のボタンで置換が完了するように調整し、テキストを変更して、幅と高さを変更した後、位置を移動します。
ステータスを示すプロセスが 1 (進行中) から 2 (完了) に変化し、それに応じて幅、高さ、位置、テキストも変化していることがわかります。
結論：
フローチャートは非常に便利でよく使われるツールです。SpreadJS と組み合わせることで、フローチャートを動的に生成する機能を簡単に実装できます。このデモをベースに、Level 要素を右クリックして新しい子や兄弟を追加したり、その他の機能を追加したりすることもできます。 SpreadJS の豊富でオープンな API を利用することで、必要な機能を非常に柔軟に実現できます。
最後に、この記事があなたのお役に立てれば幸いです~
送信元アドレス:
拡張リンク:
Spring Boot フレームワークでの Excel サーバー側のインポートとエクスポートの実装
Project Combat: オンライン見積調達システム (React +SpreadJS+Echarts)
SpreadJS と組み合わせた洗練されたフレームワークにより、純粋なフロントエンド Excel オンライン レポート デザインを実現