#चार्ट विकल्प

चार्ट कैसे दिखें, इसे कॉन्फ़िगर करें। इसमें दो मोड उपलब्ध हैं: बेसिक (ग्राफिकल) और कस्टम (JS द्वारा अनुकूलित)। बेसिक मोड त्वरित मैपिंग और सामान्य गुणों के लिए उपयुक्त है, जबकि कस्टम मोड जटिल परिदृश्यों और उन्नत अनुकूलन के लिए है।

#पैनल लेआउट

सुझाव: आसानी से कॉन्फ़िगर करने के लिए, आप पहले अन्य पैनलों को सिकोड़ सकते हैं।

सबसे ऊपर एक्शन बार है मोड चयन:

• बेसिक: ग्राफिकल कॉन्फ़िगरेशन। एक प्रकार चुनें और फ़ील्ड मैपिंग पूरी करें; सामान्य गुणों को सीधे स्विच से समायोजित करें।
• कस्टम: एडिटर में JS लिखें, और ECharts option वापस करें।

#बेसिक मोड

#चार्ट का प्रकार चुनें

• समर्थित हैं: लाइन चार्ट, एरिया चार्ट, कॉलम चार्ट, बार चार्ट, पाई चार्ट, डोनट चार्ट, फ़नल चार्ट, स्कैटर चार्ट आदि।
• चार्ट के प्रकार के अनुसार आवश्यक फ़ील्ड भिन्न हो सकते हैं। सबसे पहले “डेटा क्वेरी → डेटा देखें” में कॉलम नाम और प्रकार की पुष्टि करें।

#फ़ील्ड मैपिंग

• लाइन/एरिया/कॉलम/बार चार्ट के लिए:
  • xField: डायमेंशन (जैसे दिनांक, श्रेणी, क्षेत्र)
  • yField: मेज़र (एकत्रित संख्यात्मक मान)
  • seriesField (वैकल्पिक): सीरीज़ ग्रुपिंग (कई लाइनों/समूहों के लिए)
• पाई/डोनट चार्ट के लिए:
  • Category: श्रेणीबद्ध डायमेंशन
  • Value: मेज़र
• फ़नल चार्ट के लिए:
  • Category: चरण/श्रेणी
  • Value: मान (आमतौर पर संख्या या प्रतिशत)
• स्कैटर चार्ट के लिए:
  • xField, yField: दो मेज़र या डायमेंशन, जो अक्षों के लिए उपयोग किए जाते हैं।

अधिक चार्ट विकल्पों के लिए, आप ECharts दस्तावेज़ों को देख सकते हैं: अक्ष और उदाहरण

ध्यान दें:

• डायमेंशन या मेज़र बदलने के बाद, मैपिंग को फिर से जांचें, ताकि खाली या गलत संरेखित चार्ट न दिखें।
• पाई/डोनट और फ़नल चार्ट के लिए “श्रेणी + मान” का संयोजन प्रदान करना आवश्यक है।

#सामान्य गुण

• स्टैक, स्मूथ (लाइन/एरिया चार्ट के लिए)
• लेबल डिस्प्ले, टूलटिप, लेजेंड
• अक्ष लेबल रोटेशन, स्प्लिट लाइनें
• पाई/डोनट का रेडियस और इनर रेडियस, फ़नल सॉर्ट ऑर्डर

सुझाव:

• टाइम सीरीज़ के लिए लाइन/एरिया चार्ट का उपयोग करें और मध्यम स्मूथिंग चालू करें; श्रेणी तुलना के लिए कॉलम/बार चार्ट का उपयोग करें।
• जब डेटा सघन हो, तो सभी लेबल दिखाने से बचें, ताकि वे एक-दूसरे को ओवरलैप न करें।

#कस्टम मोड

यह एक पूर्ण ECharts option वापस करने के लिए उपयोग किया जाता है। यह उन्नत अनुकूलन के लिए उपयुक्त है, जैसे कई सीरीज़ को मर्ज करना, जटिल टूलटिप और डायनामिक स्टाइल। अनुशंसित तरीका: डेटा को dataset.source में एकीकृत करें। विस्तृत जानकारी के लिए, ECharts दस्तावेज़ देखें: डेटासेट

#डेटा कॉन्टेक्स्ट

• ctx.data.objects: ऑब्जेक्ट्स का ऐरे (प्रत्येक पंक्ति एक ऑब्जेक्ट के रूप में, अनुशंसित)
• ctx.data.rows: 2D ऐरे (हेडर सहित)
• ctx.data.columns: कॉलम द्वारा समूहीकृत 2D ऐरे

#उदाहरण: मासिक ऑर्डर लाइन चार्ट

return {
  dataset: { source: ctx.data.objects || [] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
    },
  ],
}

#पूर्वावलोकन और सहेजें

• कस्टम मोड में, संपादन पूरा करने के बाद, आप दाईं ओर स्थित 'पूर्वावलोकन' बटन पर क्लिक कर सकते हैं ताकि चार्ट पूर्वावलोकन अपडेट हो जाए।
• नीचे, 'सहेजें' पर क्लिक करें ताकि कॉन्फ़िगरेशन लागू हो जाए और सहेजा जाए; 'रद्द करें' पर क्लिक करके इस बार किए गए सभी कॉन्फ़िगरेशन परिवर्तनों को वापस लिया जा सकता है।