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]
