Buat Visual Tersuai Untuk LuckyTemplates Menggunakan Deneb

Saya ingin bercakap tentang visual tersuai Deneb baharu yang dikeluarkan baru-baru ini untuk LuckyTemplates. Ini menyediakan antara muka untuk bahasa Vega-Lite untuk digunakan untuk mencipta visual tersuai interaktif untuk LuckyTemplates.

Bahasa Vega-Lite adalah berdasarkan sintaks JSON. Ia lebih mudah untuk dilaksanakan dan difahami daripada bahasa pengaturcaraan peringkat rendah. Di samping itu, pengarang Daniel Marsh-Patrick telah memasukkan beberapa templat untuk mempercepatkan proses reka bentuk.

Saya rasa visual ini akan menjadi besar kerana ia menyediakan pengalaman kod penuh dan sangat boleh disesuaikan. Saya ingin mengambil peluang ini untuk mempamerkan beberapa contoh mudah visual Deneb Vega-Lite dan membandingkannya dengan visual LuckyTemplates standard. Anda boleh menonton video penuh tutorial ini di bahagian bawah blog ini.

Isi kandungan

• Cara Menggunakan Deneb Sebagai Visual Tersuai Untuk LuckyTemplates
• Perkara Umum Untuk Belajar Mengenai Deneb
• Mencipta Carta Bar Dengan Deneb
• Membuat Carta Garis Dengan Deneb
• Membuat Carta Kawasan Dengan Deneb
• Menggunakan Carta Lajur Bertindih Dengan Deneb
• Menghasilkan Carta Cincin Dengan Deneb
• Kesimpulan

Cara Menggunakan Deneb Sebagai Visual Tersuai Untuk LuckyTemplates

Deneb ialah antara muka yang membolehkan visual dikodkan sepenuhnya menggunakan sintaks JSON mengikut bahasa Vega-Lite. Pembentangan ini tidak bertujuan sebagai pengenalan kepada bahasa Vega-Lite tetapi ia merupakan satu pameran kecil tentang cara bahasa tersebut membenarkan visual yang seperti beberapa visual LuckyTemplates standard dan boleh disesuaikan sepenuhnya untuk disesuaikan dengan senario anda.

Visual asas yang dibangunkan dalam pembentangan ini memanfaatkan beberapa contoh templat yang tersedia dalam antara muka Deneb. Visual tersuai ialah contoh pengenalan tentang perkara yang boleh dicapai dengan sedikit usaha dalam Vega-Lite melalui pengubahsuaian percubaan dan ralat contoh lain yang boleh didapati dengan mudah dalam talian.

Berikut ialah halaman utama Deneb. Anda boleh mendapatkan beberapa bahan rujukan di sini .

Terdapat galeri yang disediakan di tapak Vega-Lite GitHub yang menunjukkan contoh perkara yang boleh dibuat dengan Vega-Lite.

Berikut ialah satu lagi contoh beberapa kad KPI tersuai yang boleh dibuat dengan visual tersuai Deneb.

Perkara Umum Untuk Belajar Mengenai Deneb

Berikut ialah beberapa perkara umum yang saya pelajari tentang Vega-Lite semasa penyiasatan awal saya. Data terikat pada tanda. Terdapat banyak tanda yang tersedia dalam Vega-Lite, termasuk bar, garis, arka, titik, teks, dan banyak lagi. Tanda mempunyai pengekodan. Sebagai contoh, tanda teks mempunyai banyak pengekodan yang tersedia, termasuk penjajaran, fon, saiz, berat dan warna.

Berbilang tanda boleh digabungkan untuk mencipta pengalaman visual komposit, termasuk lapisan (berbilang tanda bertindih antara satu sama lain dan berkongsi titik sauh atau paksi yang sama), penggabungan (berbilang markah disusun secara mendatar atau menegak), atau faset (gandaan kecil tersedia dalam banyak kuasa BI. visual di mana satu siri plot yang serupa digunakan untuk memaparkan subset data yang sama memudahkan perbandingan merentas subset).

Mencipta Carta Bar Dengan Deneb

Sekarang mari kita lihat cara visual tersuai untuk LuckyTemplates dicipta menggunakan templat daripada Deneb dan cara ia dibandingkan dengan visual LuckyTemplates standard.

Dalam contoh ini, saya telah menambahkan carta bar LuckyTemplates standard untuk menunjukkan Jumlah Jualan mengikut Saluran di sebelah kiri. Mari kita bina sesuatu yang serupa menggunakan Deneb dan Vega-Lite.

Kami akan menambah visual Deneb di sebelah kanan.

Perkara pertama yang perlu kami lakukan ialah menambah data kami, jadi mari tambahkan Saluran dan Jumlah Jualan kami .

Hanya untuk keseronokan, mari hidupkan Shadow .

Kemudian kita pilih Edit .

Kami akan memilih templat carta bar ringkas yang disediakan dalam antara muka. Untuk kategori, kami memilih Saluran dan untuk ukuran, Jumlah Jualan .

Sebaik sahaja kami mengklik Cipta , kami dapat melihat visual Deneb kami.

Kita boleh lihat terdapat banyak perkara yang serupa antara LuckyTemplates dan Deneb. Satu perkara yang tidak serupa di luar kotak ialah kami mempunyai label data yang ditunjukkan pada visual LuckyTemplates. Untuk visual Deneb, label data ini boleh ditambah dengan mudah ke dalam visual, yang akan kami lakukan dengan menambahkan lapisan lain.

Sebaik sahaja kami mengklik Edit daripada visual Deneb, kami melihat satu tanda di sini.

Saya akan mengambil coretan kod untuk menambah label data dan menggantikan kod untuk tanda tunggal dengan dua markah.

Sebaik sahaja kami menjalankan ini, kami akan mempunyai label data.

Perkara kedua yang boleh kita lakukan ialah memformatkan label data ini. Sekali lagi, saya mempunyai blok sebut harga di sini yang boleh saya masukkan dan bukannya hanya menggunakan pengekodan kosong untuk Jumlah Jualan .

Perkara lain yang sangat menarik tentang Deneb dan Vega-lite ialah kita boleh menukar carta bar kepada carta lajur dengan mudah. Mari klik pada Edit sekali lagi. Apa yang perlu kita lakukan ialah membalikkan X dan Y.

Jelas sekali, terdapat beberapa kerja yang perlu dilakukan dan pelarasan diperlukan, tetapi saya ingin menunjukkan betapa mudahnya perkara boleh diubah dalam Vega-Lite.

Membuat Carta Garis Dengan Deneb

Seterusnya, saya telah menambah carta garisan LuckyTemplates standard yang menunjukkan Jumlah Jualan mengikut Tarikh . Mari kita bina sesuatu yang serupa menggunakan Deneb Vega-lite. Mari tambahkan visual Deneb, tambahkan Tarikh dan Jumlah Jualan kami .

Mari pilih carta garisan dengan jalur selang, pilih Tarikh untuk paksi X kami dan pilih Jumlah Jualan untuk tiga nilai seterusnya.

Berikut ialah visual asas yang terhasil untuk Deneb. Anda boleh lihat terdapat banyak persamaan antara keduanya. Terdapat beberapa perbezaan, seperti paksi X dipaparkan secara berangka dalam visual Deneb.

Ada sesuatu yang boleh kita lakukan untuk membetulkannya dengan mudah. Mari kita beralih kepada Deneb dan tukar pengekodan untuk tarikh X kepada temporal .

Perbezaan kedua ialah tajuk. Mari tambahkan tajuk pada visual Deneb. Kami akan mengedit kod sekali lagi, menambah blok tajuk dan memformatkan JSON.

Dan inilah tajuk kami. Kami mempunyai kawalan penuh ke atas fon tajuk, saiz, warna, dsb.

Membuat Carta Kawasan Dengan Deneb

Mari cuba carta kawasan juga. Saya telah menambahkan carta kawasan LuckyTemplates standard yang menunjukkan Jumlah Jualan Terkumpul mengikut Tarikh .

Sekarang mari kita bina sesuatu yang serupa menggunakan Deneb Vega-Lite. Mari letakkan visual Deneb, kemudian tambahkan ukuran Tarikh dan Jumlah Jualan Terkumpul .

Mari dapatkan blok kod untuk carta kawasan kendiri dan gunakannya.

Carta kawasan di bahagian bawah adalah hasilnya.

Salah satu ciri tambahan Vega-Lite ialah anda boleh menggunakan berus . Itulah perkataan yang mereka gunakan untuk memilih selang tertentu pada carta anda.

Salah satu perkara yang sangat menarik ialah anda boleh menggunakan berus pada visual yang dipautkan. Mari buat visual Deneb baharu, tambahkan data Of Date dan Cumulative Sales yang sama . Klik Edit pada visual dan pilih Spesifikasi Kosong .

Salin kod untuk dwi carta yang dipautkan dengan berus segi empat tepat. Kemudian tampal dan jalankan kod tersebut.

Kami kini mempunyai visual utama kami, di mana kami boleh menggunakan berus untuk memaparkan selang yang dipilih dari yang pertama ke visual sekunder kami.

Menggunakan Carta Lajur Bertindih Dengan Deneb

Berikut ialah contoh sesuatu yang saya cari selama ini. Ini ialah carta lajur bertindih atau carta titik tumpu lajur yang mempamerkan hubungan antara dua nilai untuk kategori yang sama. Saya mencipta ini dalam Deneb juga.

Saya menambah beberapa kod daripada Notepad++ untuk menjadikan lajur bertindih visual.

Apa yang kami ada di sini ialah visual empat lapisan yang terdiri daripada empat lapisan berlapis di atas satu sama lain: satu untuk lajur belakang, satu untuk lajur hadapan, satu untuk label belakang dan satu untuk label hadapan. Kita dapat melihat bahawa carta bertindak balas dengan pilihan yang dibuat dalam LuckyTemplates, dan melaraskan dengan sewajarnya juga.

Menghasilkan Carta Cincin Dengan Deneb

Satu lagi perkara yang saya cari selama ini ialah carta cincin yang serupa dengan deringan aktiviti pada jam tangan Apple. Saya telah mencipta sesuatu seperti ini untuk menggunakan Python, tetapi ia tidak sebaik yang saya mahukan.

Saya cuba melakukan perkara yang sama di Deneb dan sangat berjaya dengannya. Dalam visual Deneb ini, kami mempunyai visual sembilan lapisan di mana kami telah menambahkan ukuran berasingan untuk cincin 1, 2 dan 3, nilai untuk cincin 1, 2 dan 3, warna untuk cincin 1, 2 dan 3 serta kategori untuk cincin 1, 2, dan 3.

Mari kita lihat kod yang saya gunakan di sini. Ia menggunakan konsep dalam Vega-Lite yang dipanggil Transform dan Params untuk melanjutkan data yang disediakan kepada pelbagai tanda. Kemudian saya telah melapisi sembilan markah di atas satu sama lain menggunakan paksi yang sama untuk mencipta carta cincin. Ini interaktif sepenuhnya dengan petua alat LuckyTemplates.

Satu lagi perkara yang menarik ialah anda boleh menggunakan Kod Visual Studio untuk membangunkan visual Vega-Lite anda. Pertama, anda memerlukan sambungan untuk melihat kod Vega-Lite. Saya sedang menggunakan sambungan Vega Viewer .

Kemudian anda perlu menyediakan fail teknologi dengan sambungan vl.json. Cuma klik kanan pada kod untuk pratonton Vega Graph .

Memandangkan visual Vega-Lite ialah pengalaman kod penuh, saya sebenarnya mendapati persekitaran Kod Visual Studio sangat berguna dalam pembangunan saya.

Kesimpulan

Saya harap anda mendapati tutorial ini menyerlahkan, dan ia akan membuatkan anda menerokai kemungkinan menggunakan Deneb dan Vega-Lite untuk membangunkan visualisasi melebihi apa yang tersedia dalam LuckyTemplates pada masa ini.

Jika anda menikmati visual tersuai untuk kandungan LuckyTemplates yang diliputi dalam tutorial khusus ini, sila jangan lupa untuk melanggan saluran TV LuckyTemplates .

Kami mempunyai sejumlah besar kandungan yang keluar sepanjang masa daripada saya sendiri dan pelbagai pencipta kandungan, semuanya berdedikasi untuk menambah baik cara anda menggunakan LuckyTemplates dan Power Platform.

Greg