แผนภูมิควอแดรนต์ไวยากรณ์

แผนภูมิควอแดรนต์

แผนภาพควอดรันต์เป็นแผนภาพการมองเห็นข้อมูลที่แบ่งข้อมูลออกเป็นสี่ควอดรันต์ ใช้สำหรับวาดจุดข้อมูลบนตารางสองมิติ โดยตัวแปรหนึ่งแทนบนแกน x และอีกตัวแปรแทนบนแกน y การแบ่งควอดรันต์ถูกกำหนดโดยเกณฑ์ที่เฉพาะเจาะจงกับข้อมูลที่วิเคราะห์ โดยแบ่งแผนภาพออกเป็นสี่ส่วนเท่า ๆ กัน แผนภาพควอดรันต์มักใช้เพื่อระบุรูปแบบและแนวโน้มในข้อมูล และจัดลำดับความสำคัญของการดำเนินการตามตำแหน่งของจุดข้อมูลบนแผนภาพ มักใช้ในสถานการณ์ เช่น ธุรกิจ การตลาด และการจัดการความเสี่ยง

ตัวอย่าง

                            

                                

                                    
                                    คัดลอก
                                
                                

                                    
                                    ฝัง
                                
                            
                            
                                quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
                            
                        

ไวยากรณ์

ชื่อเรื่อง

ชื่อเรื่องเป็นคำอธิบายสั้น ๆ ของแผนภาพ จะถูกเรนเดอร์ที่ด้านบนของแผนภาพเสมอ

ตัวอย่าง

                            

                                

                                    
                                    คัดลอก
                                
                                

                                    
                                    ฝัง
                                
                            
                            quadrantChart
   title This is a sample example
                        

x-axis

แกน x กำหนดข้อความที่แสดงบนแกน x แกน x แบ่งออกเป็นสองส่วนคือ 'ซ้าย' 'ขวา' คุณสามารถป้อนทั้งสองส่วนหรือป้อนเฉพาะ 'ซ้าย' ก็ได้ คำสั่งควรขึ้นต้นด้วย x-axis แล้วตามด้วย left axis text ต่อด้วยตัวคั่น --> และสุดท้ายคือ right axis text

ตัวอย่าง

1. x-axis --> ข้อความแกนซ้ายและแกนขวาจะถูกเรนเดอร์ทั้งคู่

2. x-axis เรนเดอร์เฉพาะข้อความแกนซ้าย

y-axis

แกน y กำหนดข้อความที่แสดงบนแกน y แกน y แบ่งออกเป็นสองส่วนคือ 'บน' 'ล่าง' คุณสามารถป้อนทั้งสองส่วนหรือป้อนเฉพาะ 'ล่าง' ก็ได้ คำสั่งนี้ควรขึ้นต้นด้วย y-axis แล้วตามด้วย bottom axis text ต่อด้วยตัวคั่น --> และสุดท้ายคือ top axis text

ตัวอย่าง

1. y-axis --> ข้อความแกนล่างและแกนบนจะถูกเรนเดอร์ทั้งคู่

2. y-axis เรนเดอร์เฉพาะข้อความแกนล่าง

ข้อความควอดรันต์

quadrant-[1,2,3,4] กำหนดเนื้อหาข้อความที่แสดงในแต่ละควอดรันต์

ตัวอย่าง

1. quadrant-1 กำหนดข้อความที่จะแสดงในควอดรันต์ขวาบน

2. quadrant-2 กำหนดข้อความที่จะแสดงในควอดรันต์ซ้ายบน

3. quadrant-3 กำหนดข้อความที่จะแสดงในควอดรันต์ซ้ายล่าง

4. quadrant-4 กำหนดข้อความที่จะแสดงในควอดรันต์ขวาล่าง

จุดกลม

ใช้สำหรับวาดวงกลมภายในแผนภาพควอดรันต์ ไวยากรณ์คือ : [x, y] โดยค่าของ x และ y อยู่ในช่วง 0 - 1

ตัวอย่าง

1. Point 1: [0.75, 0.80] จุดที่ 1 จะถูกวาดในควอดรันต์ขวาบน

2. Point 2: [0.35, 0.24] จุดที่ 2 จะถูกวาดในควอดรันต์ซ้ายล่าง

การกำหนดค่าแผนภาพ

ตัวแปรธีมของแผนภาพ

ตัวอย่างการกำหนดค่าและธีม

                            

                                

                                    
                                    คัดลอก
                                
                                

                                    
                                    ฝัง
                                
                            
                            
                                ---
config:
  quadrantChart:
    chartWidth: 400
    chartHeight: 400
  themeVariables:
    quadrant1TextFill: "ff0000"
---
quadrantChart
  x-axis Urgent --> Not Urgent
  y-axis Not Important --> "Important ❤"
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Delegate
  quadrant-4 Delete
                            
                        

สไตล์ของจุดข้อมูล

จุดข้อมูลสามารถกำหนดสไตล์โดยตรง หรือใช้คลาสที่ใช้ร่วมกันซึ่งกำหนดไว้แล้วก็ได้

                            

                                

                                    
                                    คัดลอก
                                
                                

                                    
                                    ฝัง
                                
                            
                            Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
                        

                            

                                

                                    
                                    คัดลอก
                                
                                

                                    
                                    ฝัง
                                
                            
                            Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
                        

สไตล์ที่ใช้ได้:

ตัวอย่างสไตล์

                            

                                

                                    
                                    คัดลอก
                                
                                

                                    
                                    ฝัง
                                
                            
                            
                                quadrantChart
  title Reach and engagement of campaigns
  x-axis Low Reach --> High Reach
  y-axis Low Engagement --> High Engagement
  quadrant-1 We should expand
  quadrant-2 Need to promote
  quadrant-3 Re-evaluate
  quadrant-4 May be improved
  Campaign A: [0.9, 0.0] radius: 12
  Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
  Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
  Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
  Campaign E:::class2: [0.5, 0.4]
  Campaign F:::class3: [0.4, 0.5] color: #0000ff
  classDef class1 color: #109060
  classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
  classDef class3 color: #f00fff, radius : 10