産業用 SCADA や電気通信ネットワーク管理では多くのチャートが使用されていることがわかりましたが、これは非常に使いやすいですが、現時点では他のプラグインを呼び出すことができない場合があります。独自のチャートを作成する必要があります。これらは美しいチャートですが、チャートを美しくするのは簡単ではありません。 。 。ウェブサイトで販売されているチャートを見て、とても良さそうだったので、HT for Web 3D を使用して小さなサンプルを作成しました。非常にシンプルできれいでした (笑)。
動的レンダリングは次のとおりです。
この例は、HT を使用して実装するのが非常に簡単です。まず HT で基本的な dm データ モデルを作成し、次にそのデータ モデルを g3d 3d コンポーネントに追加し、次に 3d でパースペクティブを設定し、3d コンポーネントを body 要素に追加します。
dm = 新しい ht.DataModel();g3d = 新しい ht.graph3d.Graph3dView(dm);g3d.setEye(0, 185, 300);g3d.addToDOM();g3d.getView().style.background = '# 000';
次のステップは、これら 5 つのグラフ バーを作成することです。私のアイデアは次のとおりです。内側のレイヤーにノードがあり、外側のレイヤーに透明なノードがあり、下部に現在のパーセンテージを表示する 3D テキストがあります。
内部ノードは非常に簡単です。HT によってカプセル化された ht.Node を直接使用して新しいノード オブジェクトを作成し、node.s メソッドを通じてノード ノードのスタイルを設定します。
var node = new ht.Node();node.s({ 'shape3d':シリンダーモデル, '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);まず説明が必要なのは、shape3d:cylinderModel スタイルの設定です。cylinderModel は HT でカスタマイズされた 3D モデルです。 :
シリンダーモデル = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);
次に、動的に変化する属性 myHeight が設定されます。HT では、ユーザーがビジネス データを保存するために、node.a メソッドが予約されています。ここには、任意の数の属性を追加できます。
次に、外部の透明なノードを作成する必要があります。このノードは、もう少し透明なスタイル設定があることを除いて、基本的に内部ノードと同じ方法で構築されます。
var cNode = new ht.Node();cNode.s({ 'shape3d':シリンダーモデル, 'shape3d.transparent': true, 'shape3d.opacity': 0.2, 'label.color': '#fff', '3d .movable': false});cNode.p3([p3[0], 50, p3[2]]);cNode.s3(20, 100, 20);dm.add(cNode);まず「shape3d.transparent」を true に設定し、次に「shape3d.opacity」の透明度を設定します。
最後に 3D テキストがあります。3D テキストをレンダリングするには、json 形式の書体フォントが必要です。その後、ht.Default.loadFontFace を使用して json 形式のフォントをメモリに読み込みます。詳細については、Web 3D の HT を参照してください。マニュアル：
ht.Default.loadFontFace('./wenquanyi.json', function(){ //...... var text = new ht.Node(); text.s3([5, 5, 5]); text .p3(cNode.p3()[0]-5, -10, 0); dm.add(text); text.s({ 'shape3d' : 'text', 'shape3d.text':node.a('myHeight')+'%', 'shape3d.text.curveSegments': 1, '3d.movable': false });});私たちが使用している書体フォントは、1 つの単語が無数の三角形で構成されるように描画されており、多くのメモリを消費するため、グラフィック カーブの細かさを低めに調整しましたが、それでも非常に鮮明です。より良いパフォーマンスのフォントを見つけることができます。メモリを使用するフォントが見つかりませんでしたのでお知らせください。
最後に、チャート内の棒グラフを動的に変更するには、アニメーションを設定し、3D フォント値を同期的に更新する必要があります。
setInterval(function(){ if(node.a('myHeight') < 100){node.a('myHeight', (node.getAttr('myHeight')+1)); node.s3(20, ノード。 a('myHeight'), 20); ノード.p3(p3[0], ノード.a('myHeight')/2, p3[2]);ノード.a('myHeight', 0); ノード.s3([20, 0, 20]); ノード.p3([p3[0], 0, p3[2]]); (テキスト) テキスト。 s('shape3d.text',node.a('myHeight')+'%');}, 100);ここでは、カスタム属性 myHeight が決定的な役割を果たします。この属性を使用して変数を保存し、動的バインディングの効果を実現できるように変数の値を任意に変更できます。
それでも理解できない場合は、メッセージを残すか、公式 Web サイトに直接アクセスして HT for Web マニュアルを参照してください。すぐに実現できる、思いつかないような効果がさらにあります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。