Bagan JSON dan ECHARTS berdasarkan HTML5 ditampilkan di antarmuka yang sama

Tiba -tiba ada ide, jika Anda dapat menempatkan beberapa titik pengetahuan yang berbeda pada antarmuka yang sama dan memasukkannya ke dalam kotak, jadi jika saya ingin melihat apa pun, itu dapat ditampilkan secara langsung, dan kotak ini harus dapat membukanya. Esensi Saya menggunakan HT untuk mewujudkan ide saya, dengan lebih dari seratus baris kode, sehingga sedikit kode yang dapat mencapai efek ini.

Mari kita lihat rendering:

Contoh paling dasar dari ini adalah kotak terluar, jadi mari kita lihat cara mencapainya:

 var box = ht.csgbox baru ();

Menggunakan HT dapat dengan mudah mengimplementasikan kotak ini.

Peta dasar yang dienkapsulasi yang digunakan dalam contoh ini adalah HT.CSGBOX, model kotak, Anda dapat merujuk pada HT untuk manual pemodelan web. HT.Style (HT untuk manual gaya web).

Jika Anda ingin menambahkan stiker di satu sisi kotak, hanya yang dapat saya pikirkan adalah fungsi ht.default.setimage yang dienkapsulasi.

Metode yang saya terapkan di sini adalah untuk merujuk ke editor HT untuk beroperasi, kembali dengan komponen graphView dan model data datamodel, dan kemudian memanggil JSON melalui metode ht.default.xhrload. Konten di JSON sebagai antarmuka visual, kemudian mengatur animasi, dan kemudian segera menyegarkan antarmuka JSON ini.

 ht.default.xhrload ('Displays/Demo/pump.json', function (teks) {const json = ht.default.parse (teks); pumpdm.deserialize (json); var rotasi curent = 0; var lasttime = new date () .getTime (); (Currentrotation);

Pada saat ini saya tidak dapat menambahkan PAMPGV dan G3D ke div bawah, dan niat saya adalah untuk menambahkan pumpgv ke sisi CSGBox di G3D. tidak lengkap. Jika Anda ingin melihat dampak dari ketinggian lebar ini pada layar, Anda dapat mengubahnya sendiri.

 pumpgv.getWidth = function () {return 600;} pumpgv.getHeight = function () {return 600;} pumpgv.getCanvas ().

Tampilan grafik Echarts juga sangat mendasar.

Pada akhirnya, Anda hanya perlu melewati dua kanvas yang dikembalikan ini ke ht.default.setImage ::

 ht.default.setImage ('echart', grafik (opsi));

Fungsi ht.default.drawimage menghasilkan diagram baru sebenarnya menggambar gambar di atas kanvas, jadi kita hanya perlu melewati kanvas yang telah kita gambar ke ht.default.setImage untuk menghasilkan gambar.

Satu hal yang perlu ditingkatkan. Ketika ada transparansi, kita perlu mengatur semua. Transparan menjadi benar.

Kita dapat mengatur transparan: true yang perlu ditampilkan. Lihatlah rendering setelah selesai:

Di atas adalah implementasi WebGL yang berbasis HTML5 dari grafik JSON dan Echarts yang diperkenalkan kepada semua orang. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!