แผนภาพ XY
แผนภาพ XY เป็นโมดูลแผนภาพที่ครอบคลุม ใช้แกน x และแกน y ในการแสดงข้อมูล
ตัวอย่าง
คัดลอก
ฝัง
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
ไวยากรณ์
ค่าข้อความทั้งหมดที่มีเพียงคำเดียวสามารถเขียนโดยไม่ต้องใช้เครื่องหมายอัญประกาศคู่ได้ หากค่าข้อความมีหลายคำ โดยเฉพาะเมื่อมีช่องว่าง ต้องล้อมด้วยเครื่องหมายอัญประกาศคู่
ทิศทาง
แผนภาพสามารถวาดในแนวนอนหรือแนวตั้ง โดยค่าเริ่มต้นเป็นแนวตั้ง
คัดลอก
ฝัง
xychart-beta horizontal
...
ชื่อเรื่อง
ชื่อเรื่องเป็นคำอธิบายสั้น ๆ ของแผนภาพ จะถูกเรนเดอร์ที่ด้านบนของแผนภาพเสมอ
ตัวอย่าง
คัดลอก
ฝัง
xychart-beta
title "This is a simple example"
...
แกน x
แกน x ส่วนใหญ่แสดงค่าหมวดหมู่ แม้ว่าจะสามารถใช้เป็นช่วงเชิงตัวเลขได้ด้วย
ตัวอย่าง
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
แกน y
แกน y ใช้แสดงช่วงเชิงตัวเลข ไม่สามารถมีค่าหมวดหมู่ได้
ตัวอย่าง
- y-axis title min --> max
- จะเพิ่มเฉพาะชื่อเรื่องเท่านั้น ช่วงจะถูกสร้างโดยอัตโนมัติตามข้อมูล
แผนภูมิเส้น
แผนภูมิเส้นมีความสามารถในการแสดงเส้นแบบกราฟิก
ตัวอย่าง
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
แผนภูมิแท่ง
แผนภูมิแท่งสามารถแสดงแท่งแบบกราฟิกได้
ตัวอย่าง
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
ตัวอย่างง่าย ๆ
สององค์ประกอบเดียวที่จำเป็นคือชื่อแผนภาพ xychart และชุดข้อมูลหนึ่งชุด ดังนั้นคุณจะสามารถวาดแผนภาพได้ด้วยการกำหนดค่าอย่างง่าย
คัดลอก
ฝัง
xychart-beta
line [+1.3, .6, 2.4, -.34]
การกำหนดค่าแผนภาพ
| พารามิเตอร์ | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| width | ความกว้างของแผนภาพ | 700 |
| height | ความสูงของแผนภาพ | 500 |
| titlePadding | ระยะห่างภายในบนล่างของชื่อเรื่อง | 10 |
| titleFontSize | ขนาดตัวอักษรของชื่อเรื่อง | 20 |
| showTitle | จะแสดงชื่อเรื่องหรือไม่ | true |
| xAxis | การกำหนดค่าแกน x | AxisConfig |
| yAxis | การกำหนดค่าแกน y | AxisConfig |
| plotReservedSpacePercent | เปอร์เซ็นต์พื้นที่ขั้นต่ำที่แต่ละกราฟใช้ในแผนภาพ | 50 |
| showDataLabel | จะแสดงค่าที่สอดคล้องกันภายในแผนภูมิแท่งหรือไม่ | false |
AxisConfig
| พารามิเตอร์ | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| showLabel | จะแสดงป้ายกำกับแกนหรือค่าขีดบอกตำแหน่งหรือไม่ | true |
| labelFontSize | ขนาดตัวอักษรของป้ายกำกับที่จะวาด | 14 |
| labelPadding | ระยะห่างบนล่างของป้ายกำกับ | 5 |
| showTitle | จะแสดงชื่อเรื่องแกนหรือไม่ | true |
| titleFontSize | ขนาดตัวอักษรของชื่อเรื่องแกน | 16 |
| titlePadding | ระยะห่างบนล่างของชื่อเรื่องแกน | 5 |
| showTick | จะแสดงขีดบอกตำแหน่งหรือไม่ | true |
| tickLength | ความยาวของขีดบอกตำแหน่ง | 5 |
| tickWidth | ความกว้างของขีดบอกตำแหน่ง | 2 |
| showAxisLine | จะแสดงเส้นแกนหรือไม่ | true |
| axisLineWidth | ความหนาของเส้นแกน | 2 |
ตัวแปรธีมของแผนภาพ
ธีมของ xychart อยู่ในคุณสมบัติ xychart สามารถกำหนดเองได้ผ่านไวยากรณ์ต่อไปนี้:
คัดลอก
ฝัง
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| พารามิเตอร์ | คำอธิบาย |
|---|---|
| backgroundColor | สีพื้นหลังของแผนภาพทั้งหมด |
| titleColor | สีของข้อความชื่อเรื่อง |
| xAxisLabelColor | สีของป้ายกำกับแกน x |
| xAxisTitleColor | สีของชื่อเรื่องแกน x |
| xAxisTickColor | สีของขีดบอกตำแหน่งแกน x |
| xAxisLineColor | สีของเส้นแกน x |
| yAxisLabelColor | สีของป้ายกำกับแกน y |
| yAxisTitleColor | สีของชื่อเรื่องแกน y |
| yAxisTickColor | สีของขีดบอกตำแหน่งแกน y |
| yAxisLineColor | สีของเส้นแกน y |
| plotColorPalette | สามารถกำหนดเองได้ด้วยไวยากรณ์ต่อไปนี้ เช่น "#f3456, #43445" |
ตัวอย่างการกำหนดค่าและธีม
คัดลอก
ฝัง
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#f96"
---
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
