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

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

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

 

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

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

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

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

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

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

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

 

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

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

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