इसके माध्यम से साझा किया गया

HorizontalBarChart - Stacked नियंत्रण (पूर्वावलोकन)

  • आलेख

[यह आलेख रिलीज़-पूर्व दस्तावेज़ है और परिवर्तन के अधीन है.]

क्षैतिज स्टैक्ड बार चार्ट स्टैक्ड बार के रूप में डेटा की एकाधिक श्रृंखला प्रदर्शित करता है, जिसमें प्रत्येक बार एक श्रेणी का प्रतिनिधित्व करता है। ये पट्टियाँ एक दूसरे के साथ-साथ खड़ी होती हैं, तथा प्रत्येक पट्ट की लम्बाई श्रृंखला की श्रेणी के मूल्य को दर्शाती है।

HorizontalBarChart - स्टैक्ड नियंत्रण.

यह कोड घटक कैनवास और कस्टम पृष्ठों में उपयोग के लिए फ्लुएंट UI हॉरिजॉन्टलबारचार्ट - स्टैक्ड नियंत्रण के चारों ओर एक आवरण प्रदान करता है।

महत्त्वपूर्ण

  • यह एक पूर्वावलोकन सुविधा है.
  • पूर्वावलोकन सुविधाएँ उत्पादन में उपयोग के लिए नहीं होती हैं और इनकी कार्यक्षमता प्रतिबंधित हो सकती हैं. यह सुविधाएँ आधिकारिक रिलीज़ से पहले उपलब्ध होती हैं ताकि ग्राहक शीघ्र पहुँच प्राप्त कर सकें और प्रतिक्रिया प्रदान कर सकें.

नोट

संपूर्ण दस्तावेज़ीकरण और स्रोत कोड के लिए, GitHub कोड घटक रिपॉजिटरी देखें।

विशेषता

नियंत्रण निम्नलिखित गुण स्वीकार करता है:

  • HideLegend - यह मान दर्शाता है कि चार्ट पर लेजेंड को दिखाना है या छिपाना है।

  • BarHeight - यह मान चार्ट में प्रस्तुत बार की ऊंचाई को दर्शाता है।

  • HideTooltip - यह विकल्प नियंत्रित करता है कि चार्ट पर टूलटिप्स दिखाए जाएं या छिपाए जाएं।

  • CustomColors - यह विकल्प चार्ट पर कस्टम रंग दिखाने के लिए उपयोग किया जाता है, यदि प्रदान किया गया हो

  • आइटम - रेंडर करने के लिए एक्शन आइटम

    • ItemTitle - विशेष चार्ट डेटा(आइटम) का प्रदर्शन नाम.
    • ItemKey - आइटम की पहचान करने के लिए उपयोग की जाने वाली कुंजी. कुंजियाँ अद्वितीय होनी चाहिए.
    • ItemValue - विशेष चार्ट डेटा(आइटम) का मान सेट करें।
    • ItemColor - विशेष चार्ट डेटा (आइटम) के लिए प्रदर्शित किए जाने वाले रंग का नाम या HEX मान सेट करें।
    • ItemCallout - पॉपओवर/टूलटिप पर प्रदर्शित होने वाला मान सेट करें।

नोट

आइटम का रंग केवल तभी लागू होता है जब CustomColors गुण चालू हो.

पहुँच क्षमता

  • एक्सेसिबिलिटी लेबल - स्क्रीन रीडर aria-label

उपयोग

नियंत्रण के Items गुण में संगत चार्ट गुणों पर डेटा मानों को मैप करें, जैसा कि नीचे दिए गए सूत्र में दर्शाया गया है। चार्ट स्वचालित रूप से सापेक्ष मूल्यों से मेल खाने के लिए दृश्य को समायोजित करता है।

सुसंगत रंग परिभाषित करने के लिए CustomColors गुण को सक्षम करें.

Table(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

सीमाएँ

इस कैनवास घटक का उपयोग केवल कैनवास ऐप और कस्टम पृष्ठों में ही किया जा सकता है.