Highcharts - पर्यावरण सेटअप

इस अध्याय में, हम चर्चा करेंगे कि वेब अनुप्रयोग विकास में उपयोग की जाने वाली हाईचर्स लाइब्रेरी कैसे स्थापित करें।

Highcharts को निर्भरता के रूप में jQuery की आवश्यकता होती है। सबसे पहले, हम jQuery लाइब्रेरी और फिर हाईचर्स लाइब्रेरी स्थापित करेंगे।

JQuery स्थापित करें

JQuery का उपयोग करने के दो तरीके हैं।

  • Download- इसे jQuery.com से स्थानीय रूप से डाउनलोड करें और इसका उपयोग करें।

  • CDN access- आपके पास सीडीएन तक भी पहुंच है। सीडीएन आपको दुनिया भर में क्षेत्रीय डेटा केंद्रों तक पहुंच प्रदान करेगा; इस मामले में, Google होस्ट। इसका मतलब है कि CDN का उपयोग करके अपने सर्वर से फ़ाइलों को होस्ट करने की जिम्मेदारी बाहरी लोगों की एक श्रृंखला पर ले जाती है। इससे एक फायदा यह भी होता है कि यदि आपके वेबपेज पर आने वाले विज़िटर ने पहले ही उसी सीडीएन से jQuery की कॉपी डाउनलोड कर ली है, तो उसे दोबारा डाउनलोड नहीं करना पड़ेगा।

डाउनलोड किए गए jQuery का उपयोग करना

निम्नलिखित स्क्रिप्ट का उपयोग करके HTML पेज में jQuery जावास्क्रिप्ट फ़ाइल शामिल करें -

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

CDN का उपयोग करना

हम इस ट्यूटोरियल में jQuery लाइब्रेरी के CDN संस्करणों का उपयोग कर रहे हैं।

निम्नलिखित स्क्रिप्ट का उपयोग करके HTML पेज में jQuery जावास्क्रिप्ट फ़ाइल शामिल करें -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

हाईचार्ट स्थापित करें

Highcharts का उपयोग करने के दो तरीके निम्नलिखित हैं।

  • Download- इसे highcharts.com से स्थानीय स्तर पर डाउनलोड करें और इसका उपयोग करें।

  • CDN access- आपके पास सीडीएन तक भी पहुंच है। सीडीएन आपको दुनिया भर में क्षेत्रीय डेटा केंद्रों तक पहुंच प्रदान करेगा; इस मामले में, हाईचर्ट्स मेजबान - Code.Highcharts.Com।

डाउनलोड किए गए Highcharts का उपयोग करना

निम्न स्क्रिप्ट का उपयोग करके HTML पेज में हाईचर्स जावास्क्रिप्ट फ़ाइल शामिल करें -

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

CDN का उपयोग करना

हम इस पूरे ट्यूटोरियल में हाईचर्स लाइब्रेरी के CDN संस्करणों का उपयोग कर रहे हैं।

निम्न स्क्रिप्ट का उपयोग करके HTML पेज में हाईचर्स जावास्क्रिप्ट फ़ाइल शामिल करें -

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>