สร้างวิชวลแบบกำหนดเองสำหรับ LuckyTemplates โดยใช้ Deneb

ฉันต้องการพูดคุยเกี่ยวกับวิชวลแบบกำหนดเองใหม่ของ Deneb ที่เพิ่งเปิดตัวสำหรับ LuckyTemplates สิ่งนี้จัดเตรียมอินเทอร์เฟซสำหรับภาษา Vega-Lite เพื่อใช้ในการสร้างวิชวลแบบกำหนดเองเชิงโต้ตอบสำหรับ LuckyTemplates

ภาษา Vega-Lite ใช้ไวยากรณ์ JSON นำไปใช้และเข้าใจได้ง่ายกว่าภาษาโปรแกรมระดับล่าง นอกจากนี้ ผู้เขียน Daniel Marsh-Patrick ได้รวมเทมเพลตบางส่วนเพื่อเร่งกระบวนการออกแบบ

ฉันคิดว่าภาพนี้จะมีขนาดใหญ่มากเนื่องจากมอบประสบการณ์โค้ดเต็มรูปแบบและปรับแต่งได้อย่างมาก ฉันต้องการใช้โอกาสนี้แสดงตัวอย่างง่ายๆ สองสามตัวอย่างของวิชวล Deneb Vega-Lite และเปรียบเทียบกับวิชวล LuckyTemplates มาตรฐาน คุณสามารถดูวิดีโอทั้งหมดของบทช่วยสอนนี้ได้ที่ด้านล่างของบล็อกนี้

สารบัญ

• วิธีใช้ Deneb เป็นวิชวลแบบกำหนดเองสำหรับ LuckyTemplates
• จุดทั่วไปเพื่อเรียนรู้เกี่ยวกับ Deneb
• การสร้างแผนภูมิแท่งด้วย Deneb
• สร้างแผนภูมิเส้นด้วย Deneb
• การสร้างแผนภูมิพื้นที่ด้วย Deneb
• การใช้แผนภูมิคอลัมน์ที่ทับซ้อนกันกับ Deneb
• การสร้างแผนภูมิวงแหวนกับ Deneb
• บทสรุป

วิธีใช้ Deneb เป็นวิชวลแบบกำหนดเองสำหรับ LuckyTemplates

Deneb เป็นอินเทอร์เฟสที่อนุญาตให้เขียนโค้ดวิชวลได้อย่างสมบูรณ์โดยใช้ไวยากรณ์ JSON ตามภาษา Vega-Lite งานนำเสนอนี้ไม่ได้มีวัตถุประสงค์เพื่อเป็นการแนะนำภาษา Vega-Lite แต่เป็นการแสดงให้เห็นว่าภาษาอนุญาตให้แสดงภาพที่เหมือนกับ วิชวล LuckyTemplatesมาตรฐานบางส่วนและสามารถปรับแต่งได้อย่างเต็มที่เพื่อให้เหมาะกับสถานการณ์ของคุณ

วิชวลพื้นฐานที่พัฒนาขึ้นในการนำเสนอนี้ใช้ประโยชน์จากเทมเพลตตัวอย่างบางส่วนที่มีอยู่ในอินเทอร์เฟซ Deneb วิชวลแบบกำหนดเองเป็นตัวอย่างเบื้องต้นของสิ่งที่สามารถทำได้ด้วยความพยายามเพียงเล็กน้อยใน Vega-Lite ผ่านการลองผิดลองถูกของตัวอย่างอื่นๆ ที่สามารถพบได้ง่ายทางออนไลน์

นี่คือหน้าแรกของ Deneb คุณสามารถค้นหาเอกสารอ้างอิงได้ที่นี่

มีแกลเลอรีบนเว็บไซต์ Vega-Lite GitHub ที่แสดงตัวอย่างสิ่งต่างๆ ที่สร้างได้ด้วย Vega-Lite

ต่อไปนี้เป็นอีกตัวอย่างหนึ่งของการ์ด KPI แบบกำหนดเองที่สามารถสร้างได้ด้วยวิชวลแบบกำหนดเองของ Deneb

จุดทั่วไปเพื่อเรียนรู้เกี่ยวกับ Deneb

ต่อไปนี้คือประเด็นทั่วไปบางส่วนที่ฉันได้เรียนรู้เกี่ยวกับ Vega-Lite ระหว่างการตรวจสอบเบื้องต้น ข้อมูลเชื่อมโยงกับเครื่องหมาย มีเครื่องหมายมากมายใน Vega-Lite รวมถึงแถบ เส้น ส่วนโค้ง จุด ข้อความ และอื่น ๆ อีกมากมาย เครื่องหมายมีการเข้ารหัส ตัวอย่างเช่น เครื่องหมายข้อความมีการเข้ารหัสมากมาย รวมถึงการจัดตำแหน่ง แบบอักษร ขนาด น้ำหนัก และสี

สามารถรวมเครื่องหมายหลายอันเพื่อสร้างประสบการณ์การมองเห็นแบบผสม รวมถึงเลเยอร์ (เครื่องหมายหลายอันทับซ้อนกันและใช้จุดยึดหรือแกนเดียวกันร่วมกัน) การต่อข้อมูล (เครื่องหมายหลายอันจัดเรียงตามแนวนอนหรือแนวตั้ง) หรือด้าน (ตัวคูณขนาดเล็กที่มีอยู่ใน power BI จำนวนมาก วิชวลที่ใช้ชุดของพล็อตที่คล้ายกันเพื่อแสดงชุดย่อยของข้อมูลเดียวกันที่อำนวยความสะดวกในการเปรียบเทียบระหว่างชุดย่อย)

การสร้างแผนภูมิแท่งด้วย Deneb

ตอนนี้ มาดูกันว่าวิชวลแบบกำหนดเองสำหรับ LuckyTemplates ถูกสร้างขึ้นโดยใช้เทมเพลตจาก Deneb อย่างไร และเปรียบเทียบกับวิชวล LuckyTemplates มาตรฐานอย่างไร

ในตัวอย่างนี้ ฉันได้เพิ่มแผนภูมิแท่ง LuckyTemplates มาตรฐานเพื่อแสดงยอดขายรวมตามช่องทางทางด้านซ้าย มาสร้างสิ่งที่คล้ายกันโดยใช้ Deneb และ Vega-Lite

เราจะเพิ่มวิชวล Deneb ทางด้านขวา

สิ่งแรกที่เราต้องทำคือเพิ่มข้อมูลของเรา ดังนั้นมาเพิ่มช่องทางและยอดขายรวม ของเรา

เพื่อความสนุกเรามาเปิดShadowกันเถอะ

จากนั้นเราเลือกแก้ไข

เราจะเลือกเทมเพลตแผนภูมิแท่งอย่างง่ายที่มีให้ในอินเทอร์เฟซ สำหรับหมวดหมู่ เราเลือกช่องทางและสำหรับการวัดยอดขายรวม

เมื่อเราคลิกสร้างเราจะเห็นภาพ Deneb ของเรา

เราจะเห็นว่ามีหลายสิ่งที่คล้ายกันระหว่าง LuckyTemplates และ Deneb สิ่งหนึ่งที่ไม่เหมือนกันทันทีที่แกะกล่องคือเรามีป้ายชื่อข้อมูลที่แสดงบนวิชวล LuckyTemplates สำหรับวิชวล Deneb คุณสามารถเพิ่มป้ายชื่อข้อมูลเหล่านี้ลงในวิชวลได้อย่างง่ายดาย ซึ่งเราจะทำโดยการเพิ่มเลเยอร์อื่น

เมื่อเราคลิกแก้ไขจากวิชวล Deneb เราจะเห็นเครื่องหมายเดียวที่นี่

ฉันจะหยิบข้อมูลโค้ดเพื่อเพิ่มป้ายกำกับข้อมูลและแทนที่โค้ดสำหรับเครื่องหมายเดียวด้วยเครื่องหมายสองอัน

เมื่อเราดำเนินการนี้ เราจะมีป้ายกำกับข้อมูล

สิ่งที่สองที่เราทำได้คือจัดรูปแบบป้ายชื่อข้อมูลเหล่านี้ อีกครั้ง ฉันมีบล็อก คำพูดที่นี่ที่ฉันสามารถใส่แทนการใช้การเข้ารหัสเปล่าๆ สำหรับTotal Sales

อีกสิ่งที่ยอดเยี่ยมมากเกี่ยวกับ Deneb และ Vega-lite คือเราสามารถเปลี่ยนแผนภูมิแท่งเป็นแผนภูมิคอลัมน์ได้อย่างง่ายดาย ให้คลิกที่แก้ไขอีกครั้ง สิ่งที่เราต้องทำคือพลิก X และ Y

เห็นได้ชัดว่ามีงานบางอย่างที่ต้องทำและต้องมีการปรับเปลี่ยน แต่ฉันต้องการแสดงให้เห็นว่าสามารถเปลี่ยนแปลงสิ่งต่างๆ ใน ​​Vega-Lite ได้ง่ายเพียงใด

สร้างแผนภูมิเส้นด้วย Deneb

ต่อไป ฉันได้เพิ่มแผนภูมิเส้น LuckyTemplates มาตรฐานที่แสดงยอดขายรวมตามวันที่ มาสร้างสิ่งที่คล้ายกันโดยใช้ Deneb Vega-lite มาเพิ่มวิชวล Deneb เพิ่มในDate และ Total Sales ของเรา

ให้เลือกแผนภูมิเส้นที่มีแถบช่วงเวลา เลือกวันที่สำหรับแกน X ของเรา และเลือกยอดขายรวมสำหรับค่าสามค่าถัดไป

นี่คือภาพพื้นฐานที่เป็นผลลัพธ์สำหรับ Deneb คุณจะเห็นว่ามีความคล้ายคลึงกันมากระหว่างสองสิ่งนี้ มีความแตกต่างเล็กน้อย เช่น แกน X แสดงเป็นตัวเลขในวิชวล Deneb

มีบางอย่างที่เราสามารถทำได้เพื่อแก้ไขได้อย่างง่ายดาย ลองพลิกไปที่ Deneb แล้วเปลี่ยนการเข้ารหัสสำหรับ X date เป็นtemporal

ความแตกต่างที่สองคือชื่อเรื่อง มาเพิ่มชื่อให้กับวิชวล Deneb เราจะแก้ไขโค้ดอีกครั้ง เพิ่มบล็อกชื่อเรื่อง และจัดรูปแบบ JSON

และนี่คือชื่อเรื่องของเรา เราสามารถควบคุมแบบอักษร ขนาด สี และอื่นๆ ของชื่อเรื่องได้อย่างเต็มที่

การสร้างแผนภูมิพื้นที่ด้วย Deneb

ลองใช้แผนภูมิพื้นที่ด้วย ฉันได้เพิ่มแผนภูมิพื้นที่ LuckyTemplates มาตรฐานที่แสดง ยอดขาย รวมสะสมตามวันที่

ตอนนี้มาสร้างสิ่งที่คล้ายกันโดยใช้ Deneb Vega-Lite ใส่วิชวล Deneb แล้วเพิ่มการวัดวันที่และยอดขายรวมสะสม

มารับบล็อกโค้ดสำหรับแผนภูมิพื้นที่แบบสแตนด์อโลน แล้วนำไปใช้

แผนภูมิพื้นที่ด้านล่างคือผลลัพธ์

คุณสมบัติเพิ่มเติมอย่างหนึ่งของ Vega-Lite คือคุณสามารถใช้แปรงได้ นั่นคือคำที่พวกเขาใช้สำหรับเลือกช่วงเวลาหนึ่งบนแผนภูมิของคุณ

สิ่งหนึ่งที่เจ๋งมากคือคุณสามารถใช้แปรงกับภาพที่เชื่อมโยงได้ มาสร้างภาพ Deneb ใหม่ เพิ่มข้อมูลเดียวกันของวันที่และยอดขายสะสม คลิกแก้ไขบนวิชวล และเลือกล้างข้อมูลจำเพาะ

คัดลอกโค้ดสำหรับแผนภูมิคู่ที่เชื่อมโยงกันด้วยแปรงสี่เหลี่ยม จากนั้นวางและรันโค้ด

ตอนนี้เรามีวิชวลหลัก ซึ่งเราสามารถใช้แปรงเพื่อแสดงช่วงเวลาที่เลือกจากภาพแรกไปยังวิชวลรอง

การใช้แผนภูมิคอลัมน์ที่ทับซ้อนกันกับ Deneb

นี่คือตัวอย่างของบางสิ่งที่ฉันค้นหามาระยะหนึ่งแล้ว นี่คือแผนภูมิคอลัมน์ที่ทับซ้อนกันหรือแผนภูมิสัญลักษณ์ แสดงหัวข้อย่อย ของคอลัมน์ที่แสดงความสัมพันธ์ระหว่างค่าสองค่าสำหรับประเภทเดียวกัน ฉันสร้างสิ่งนี้ใน Deneb เช่นกัน

ฉันเพิ่มโค้ดบางส่วนจาก Notepad++ เพื่อทำให้คอลัมน์ที่ทับซ้อนกันมองเห็นได้

สิ่งที่เรามีคือวิชวลสี่เลเยอร์ที่ประกอบด้วยสี่เลเยอร์ซ้อนทับกัน: หนึ่งสำหรับคอลัมน์หลัง หนึ่งสำหรับคอลัมน์ด้านหน้า หนึ่งสำหรับป้ายกำกับด้านหลัง และอีกอันสำหรับป้ายกำกับด้านหน้า เราจะเห็นว่าแผนภูมิตอบสนองด้วยการเลือกที่ทำใน LuckyTemplates และปรับเปลี่ยนตามนั้นเช่นกัน

การสร้างแผนภูมิวงแหวนกับ Deneb

อีกอย่างที่ฉันตามหามาสักพักแล้วก็คือแผนภูมิวงแหวนที่คล้ายกับวงแหวนกิจกรรมบนนาฬิกา Apple ฉันสร้างสิ่งนี้สำหรับโดยใช้ Python แต่มันไม่ดีเท่าที่ฉันต้องการ

ฉันพยายามทำสิ่งเดียวกันในเดเนบและประสบความสำเร็จอย่างมาก ในวิชวล Deneb นี้ เรามีวิชวลเก้าชั้นที่เราได้เพิ่มมาตรการแยกต่างหากสำหรับวงแหวน 1, 2 และ 3, ค่าสำหรับวงแหวน 1, 2 และ 3, สีสำหรับวงแหวน 1, 2 และ 3 และหมวดหมู่สำหรับวงแหวน 1, 2 และ 3

ลองดูรหัสที่ฉันใช้ที่นี่ มันใช้แนวคิดใน Vega-Lite ที่เรียกว่าTransformและParamsเพื่อขยายข้อมูลที่มีให้กับเครื่องหมายต่างๆ จากนั้นฉันก็วางเครื่องหมายเก้าอันทับกันโดยใช้แกนเดียวกันเพื่อสร้างแผนภูมิวงแหวน นี่เป็นการโต้ตอบอย่างสมบูรณ์ด้วยคำแนะนำเครื่องมือ LuckyTemplates

สิ่งที่น่าสนใจอีกอย่างคือคุณสามารถใช้Visual Studio Codeเพื่อพัฒนาภาพ Vega-Lite ของคุณได้ ขั้นแรก คุณต้องมีส่วนขยายเพื่อดูรหัส Vega-Lite ฉันกำลังใช้ ส่วนขยาย Vega Viewer

จากนั้นคุณต้องตั้งค่าไฟล์เทคโนโลยีที่มีนามสกุล vl.json เพียงคลิกขวาที่โค้ดเพื่อดูตัวอย่างVega Graph

เนื่องจากวิชวล Vega-Lite เป็นโค้ดเต็มรูปแบบ ฉันพบว่าสภาพแวดล้อม Visual Studio Code มีประโยชน์มากในการพัฒนาของฉัน

บทสรุป

ฉันหวังว่าคุณจะพบว่าบทช่วยสอนนี้ส่องสว่าง และมันจะทำให้คุณสำรวจความเป็นไปได้ของการใช้ Deneb และ Vega-Lite เพื่อพัฒนาการแสดงภาพที่เหนือกว่าสิ่งที่มีอยู่ในปัจจุบันใน LuckyTemplates

หากคุณชอบภาพที่กำหนดเองสำหรับเนื้อหา LuckyTemplates ที่ครอบคลุมในบทช่วยสอนเฉพาะนี้ โปรดอย่าลืมสมัครรับข้อมูลช่อง LuckyTemplates TV

เรามีเนื้อหาจำนวนมากออกมาตลอดเวลาจากตัวฉันเองและผู้สร้างเนื้อหาจำนวนมาก ทั้งหมดนี้ทุ่มเทให้กับการปรับปรุงวิธีที่คุณใช้ LuckyTemplates และ Power Platform

เกร็ก