चार्ट चित्र मैप बनाना

शुरुआती जानकारी

एचटीएमएल स्टैंडर्ड की मदद से, इमेज मैप का इस्तेमाल करके वेब पेज की इमेज पर हॉट स्पॉट तय किए जा सकते हैं. इन हॉट स्पॉट का इस्तेमाल होवर टेक्स्ट दिखाने या लिंक के तौर पर किया जा सकता है. इसके अलावा, इंटरैक्टिविटी चालू करने के लिए, JavaScript इवेंट हैंडलिंग भी जोड़ी जा सकती है. उदाहरण के लिए, अपने माउस को इस इमेज के बार और ऐक्सिस लेबल पर घुमाएं:

ये हॉट स्पॉट <map> और <area> एचटीएमएल एलिमेंट का इस्तेमाल करके बनाए जाते हैं. Chart API, इसके लिए हॉट स्पॉट मैप बनाने के लिए सभी ज़रूरी निर्देशांक दिखा सकता है, जैसा कि आगे बताया गया है.

अपने चार्ट के लिए मैप बनाना

अपने चार्ट के यूआरएल में chof=json पैरामीटर जोड़ने पर, आपको JSON स्ट्रिंग मिलेगी. इसमें, वह पूरा डेटा शामिल होगा जो आपको अपने चार्ट के लिए, इमेज मैप बनाने के लिए चाहिए. इसके बाद, अपने चार्ट के खास सेक्शन में लिंक जोड़े जा सकते हैं. इसके अलावा, अपने चार्ट को ज़्यादा इंटरैक्टिव बनाने के लिए, क्लिक इवेंट के लिए JavaScript फ़ंक्शन अटैच किए जा सकते हैं. ध्यान दें कि हर तरह के चार्ट में यह सुविधा काम नहीं करती है. ज़्यादा जानकारी के लिए, चार्ट से जुड़ा खास दस्तावेज़ देखें.

इस पेज पर मौजूद टूल, आपको इमेज मैप के लिए एचटीएमएल जनरेट करने में मदद करेगा. इस एचटीएमएल को अपने पेज में हमेशा के लिए जोड़ा जा सकता है या हमारे कोड को अपने पेज पर कॉपी भी किया जा सकता है. अगर आपका पेज, उपयोगकर्ता को पेज पर डाइनैमिक तौर पर मैप बदलने की सुविधा देता है, तो तुरंत मैप को जनरेट करने का अनुरोध करें और उसे जनरेट करें.

मैप जनरेट करने के लिए इस टूल के इस्तेमाल का तरीका यहां दिया गया है:

1. अपने चार्ट के लिए JSON आउटपुट पाएं: अपने चार्ट यूआरएल में chof=json जोड़ें, अपने ब्राउज़र में उस यूआरएल को ब्राउज़ करें, और लौटाए गए टेक्स्ट को कॉपी करें.
2. आपने जिस JSON टेक्स्ट को कॉपी किया है उसे नीचे दिए गए टेक्स्ट बॉक्स में चिपकाएं, जिसे "JSON आउटपुट" मार्क किया गया है और "Maps बनाएं" पर क्लिक करें.
3. जनरेट किए गए मैप कोड को अपने पेज में चिपकाएं
4. अपने <map> एलिमेंट के लिए, जनरेट किए गए कोड को कोई यूनीक नाम देकर अपडेट करें.
5. मैप एलिमेंट को हटाएं जिसकी आपको ज़रूरत नहीं है (उदाहरण के लिए, खास बार, स्लाइस, लेबल या ऐक्सिस एलिमेंट).
6. जनरेट किए गए <area> एलिमेंट में, href एट्रिब्यूट को अपडेट करें.
7. अपने <img> एलिमेंट में usemap="#MAP_NAME" एट्रिब्यूट जोड़ें और MAP_NAME को अपने मैप के नाम से बदलें.

   ज़रूरी जानकारी: इस्तेमाल मैप की वैल्यू से पहले ई-सिम का इस्तेमाल ज़रूर करें. उदाहरण के लिए: usemap="#mymap". इस मामले में, मैप का नाम "mymap" है, न कि "#mymap".

JSON स्ट्रिंग का फ़ॉर्मैट

chof=json तय करने पर, JSON का यह फ़ॉर्मैट आपको मिलता है:

• chartshape नाम का रूट ऑब्जेक्ट. इस ऑब्जेक्ट में ऑब्जेक्ट के कलेक्शन होते हैं. हर ऑब्जेक्ट, चार्ट के इमेज मैप में एक एरिया को दिखाता है. हर ऑब्जेक्ट में ये प्रॉपर्टी होती हैं:
  • name - इस खास इलाके के लिए कोई नाम. नाम रखने का सामान्य तरीका elementtype_series#_item# है. उदाहरण के लिए: पहली सीरीज़ में पहले बार की जानकारी देने वाले एरिया के लिए bar0_0 या x-ऐक्सिस पर दूसरे ऐक्सिस लेबल की जानकारी देने वाले एरिया के लिए Axis0_1.
  • type - इस हिस्से का आकार. चार्ट टाइप के आधार पर, यह इनमें से कोई एक वैल्यू होगी: RECT, SC या POLY. यह <area> टैग के आकार एट्रिब्यूट के बराबर होता है.
  • coords - एरिया के बारे में बताने वाला नंबर वाला अरे; <area> टैग के coords एट्रिब्यूट के बराबर.