Canvas で 3D 動的チャートを作成する方法

今回はCanvas3D動的チャートの作成方法について説明しますCanvasを使用して3D動的チャートを作成する際の注意点は何ですか? 以下は実際的なケースです。

産業用 SCADA や電気通信ネットワーク管理で多くのチャートが使用されていることがわかりましたが、ほとんどの人はチャートの作成に echart を使用していますが、現時点では他のプラグインを呼び出すことができない場合があります。私たちはこの美しいチャートを自分で書きましたが、チャートは簡単に美しくすることはできません。 。 。ウェブサイトで販売されているチャートを見て、とても良さそうだったので、HT for Web 3D を使用して小さなサンプルを作成しました。とてもシンプルで美しいです (笑)。ダイナミック レンダリングは次のとおりです。

この例は、HT で実装するのが非常に簡単です。まず HT で基本的な dm データ モデルを作成し、次にそのデータ モデルを g3d 3d コンポーネントに追加し、次に 3d でパースペクティブを設定し、3d コンポーネントを body 要素に追加します。 次のステップは、これらの 5 つのグラフ バーを作成することです。これは、内側のレイヤーにノードがあり、外側のレイヤーに透明なノードがあり、下部に現在のパーセンテージを表示する 3D テキストがあります。

内層のノードは非常に簡単で、HT によってカプセル化された ht.Node を直接使用して新しいノード オブジェクトを作成し、node.s メソッドを通じてノード ノードのスタイルを設定しました。このスタイルを設定するには、まず、shape3d

属性

で 3D モデルとして表示されるアイコン効果を指定します。CylinderModel は、HT の Web モデリング マニュアルを参照してください。

次に、動的に変化する属性 myHeight を設定します。HT では、node.a メソッドはユーザーがビジネス データを保存するために予約されています。ここに任意の数の属性を追加できます。

次に作成する必要があるのは、外部透明ノードです。このノードの構築方法は基本的に内部ノードと同じですが、もう少し「透明」なスタイル設定が必要です:

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
g3d.setEye(0, 185, 300);
g3d.addToDOM();
g3d.getView().style.background = '#000';

最初に「shape3d」を設定する必要があります。 .transparent' を true に設定し、'shape3d.opacity' の透明度を設定します。 最後は 3D テキストです。3D テキストをレンダリングするには、json 形式の書体フォントが必要で、ht.Default.loadFontFace を通じて json 形式のフォントをメモリに読み込みます。詳細については、Web 3D の HT を参照してください。マニュアル:

var node = new ht.Node();
node.s({
    'shape3d': cylinderModel,
    'shape3d.color': color,
    '3d.movable': false
});
node.a({
    'myHeight': s3[1],
});
node.p3([p3[0], s3[1]/2, p3[2]]);
node.s3(s3);
dm.add(node);

を使用しているため、書体フォントは単語が無数の三角形で構成されるように描画され、メモリを多く消費するため、グラフィックカーブの細かさを低レベルに調整しましたが、より良いパフォーマンスのフォントが見つかった場合は、それを使用できますが、メモリ使用量の少ないフォントはまだ見つかっていないことをお知らせください。

最後に、グラフ内の棒グラフを動的に変更するには、アニメーションを設定し、3D フォント値を同期的に更新する必要があります:

cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);

ここでは、カスタム属性「myHeight」が決定的な役割を果たします。変数を格納し、変数

の値を自由に変更できるため、動的バインディングの効果を実現できます。

理解できない場合は、メッセージを残すか、公式Webサイトに直接アクセスしてWeb用HTマニュアルを参照してください。あなたが考えられないほど多くの効果があり、すぐに実現できると思います~

。この記事の事例を読んでその方法をマスターしたら、さらに興味深い内容が見つかるでしょう。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨書籍:

H5 でファイルを読み取り、サーバーにアップロードする方法

選択ドロップダウン ボックスの右側にプロンプ​​ト アイコンを追加する方法

以上がCanvas で 3D 動的チャートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。