HTML5 Canvas に基づく 3D 動的チャート

この記事では主に HTML5 Canvas に基づく 3D ダイナミック チャートの例を紹介します。内容は非常に優れているので、参考として共有します。

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

この例は、HT で実装するのが非常に簡単です。まず HT で基本的な dm データ モデルを作成し、次にそのデータ モデルを g3d 3d コンポーネントに追加し、次に 3d でパースペクティブを設定し、3d コンポーネントを body 要素に追加します。

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

次のステップは、これらの 5 つのグラフ バーを作成することです。内側のレイヤーにノードがあり、外側のレイヤーに透明なノードがあり、下部に現在のパーセンテージを表示する 3D テキストがあります。 。

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

どれを説明すべきか さらに、'shape3d':cylinderModel スタイル設定は、まず、shape3d 属性で 3D モデルとして表示されるアイコンの効果を指定します。cylinderModel は HT でカスタマイズされた 3D モデルです。 Web モデリング マニュアル:

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

次に作成する必要があるのは、外部透明ノードです。このノードの構造は、もう少し「透明」なスタイル設定を除いて、基本的に内部ノードと同じです。最初に「shape3d.transparent」を設定し、次に「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);

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

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

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

ここで、カスタマイズした属性「myHeight」が登場します。決定的な役割を果たします。この属性を使用して変数を格納し、変数の値を任意に変更できるため、動的バインディングの効果を実現できます。

理解できない場合は、メッセージを残すか、公式Webサイトに直接アクセスしてWeb用HTマニュアルを参照してください。すぐに達成できる、思いつかないような効果がさらにあります〜

上記。この記事の内容はすべて皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

キャンバスを使用してマウスを押したまま移動して軌跡を描く方法

HTML5を使用する 三角形や四角形などの多角形を描画する Canvas メソッド

グラデーション背景効果を実装するための JS と CSS のコード

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