Use Chart.js to turn data into interactive diagrams

Sep 16, 2025
कैसे करना है
  • [2 9] चार्ट.जेएस का उपयोग करना: चरण 11-20

    • सिद्धांत रूप में, आरेख बनाना मुश्किल नहीं है। एक पाई चार्ट के लिए आवश्यक त्रिकोणमिति को संभालना प्रशिक्षण प्रोग्रामर के लिए उपयोग की जाने वाली सबसे क्लासिक नौकरियों में से एक है। डेवलपर्स के ध्यान के लिए अभी बहुत सारे आरेखण पुस्तकालय हैं, लेकिन इस आलेख में, हम ओपन सोर्स टूल चार्ट। जेएस का उपयोग करने के तरीके पर ध्यान केंद्रित करने जा रहे हैं।

    हम पुस्तकालय को अपने पैसों के माध्यम से रखेंगे, यादृच्छिक रूप से जेनरेट किए गए डेटा से प्रिंट करने योग्य आरेखों का एक सेट बनायेंगे। Chart.js एक विशेष रूप से लोकप्रिय है वेब डिजाइन उपकरण क्योंकि यह उपयोग की आसानी और उन्नत सुविधाओं के बीच एक अद्वितीय व्यापार-बंद प्रदान करता है, जिससे आप इंटरैक्टिव चार्ट बनाने और आकर्षक बनाने में सक्षम बनाता है आलेख जानकारी ।

    Chart.js के साथ, आप कम से कम प्रयास के साथ अपनी वेबसाइटों में जोड़ने के लिए आठ अलग-अलग चार्ट प्रकारों में से चुन सकते हैं। हाल ही में जोड़ा गया एनिमेशन मॉड्यूल स्नैज़ी-दिखने वाले दृश्यों के साथ आरेखों को समृद्ध करता है। अपने आरेखों को घर बनाने के लिए एक नई साइट बनाना? आपकी मिल [2 9] वेब होस्टिंग

    स्थान पर, और एक शीर्ष की कोशिश करना सुनिश्चित करें [2 9] वेबसाइट निर्माता । ठीक है, चलो शुरू करें।

    इसे बढ़ाने के लिए प्रत्येक छवि के ऊपरी दाएं भाग में आइकन पर क्लिक करें।

    01. पुस्तकालय को तैनात करें

    चार्ट.जेएस के उपयोग के रूप में व्यापक है, आप क्लाउडफ्लेयर जैसे विभिन्न सीडीएन से अपने न्यूनतम संस्करण पा सकते हैं। बस इसे एक के साथ लोड करें [2 9] & lt; स्क्रिप्ट और जीटी;

    टैग करें, और सुनिश्चित करें कि ए [2 9] & lt; कैनवास और जीटी; ऑब्जेक्ट पास है - चार्ट.जेएस इस विजेट में प्रदान किए गए प्रतिपादन बुनियादी ढांचे का उपयोग करके इसका जादू करता है। 
     & lt; html & gt;
& lt; हेड और जीटी;
& lt; स्क्रिप्ट src = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
Chart.min.js "& gt;
& lt; / स्क्रिप्ट & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
& lt; कैनवास आईडी = "वर्करिया" & gt;
& lt; / कैनवास और जीटी;
& lt; / शरीर & gt;
& lt; / html & gt;

    02. प्रारंभ प्रारंभ

    First, load up the framework

    सबसे पहले, ढांचे को लोड करें

    जब ढांचा लोड हो जाता है, तो अगले चरण में एक कैनवास 2 डी हैंडल को इंगित करना शामिल है [2 9] & lt; कैनवास और जीटी;

    उदाहरण पूर्ववर्ती चरण में बनाया गया। इसका उपयोग तब एक नया उदाहरण बनाने के लिए किया जा सकता है [2 9] चार्ट () कक्षा, जो डेटा हैंडलिंग, प्रतिपादन और बातचीत के लिए ज़िम्मेदार है। 
     & lt; स्क्रिप्ट और जीटी;
(समारोह() {
var ctx = दस्तावेज़।
GetElementById ('वर्करिया')। GetContext ('2 डी');
वर चार्ट = नया चार्ट (सीटीएक्स,
{
टाइप: 'लाइन',
विकल्प: {},
। । ।
});
}) ();
& lt; / स्क्रिप्ट & gt;

    03. एक डेटा स्रोत जोड़ें

    line chart

    हमारे लाइन चार्ट के लिए, केवल एक डेटासेट की आवश्यकता है

    चार्ट क्लासेस एक डेटा पॉइंटर लेते हैं जो एक या अधिक प्रदान करता है [2 9] डाटासेट

    वास्तविक माप जानकारी युक्त वस्तुओं। हमारे लाइन चार्ट के मामले में, केवल एक डेटासेट की आवश्यकता है। यह अनिवार्य डेटा तत्व और वास्तविक प्रदर्शन प्रक्रिया को नियंत्रित करने वाले कुछ वैकल्पिक पैरामीटर के साथ आता है। [12 9] var चार्ट = नया चार्ट (सीटीएक्स, { टाइप: 'लाइन', विकल्प: {}, डेटा: { लेबल: ["जनवरी", "फरवरी", "मार्च", "अप्रैल", "मई", "जून", "जुलाई"], डेटासेट्स: [{ लेबल: "मेरा पहला डेटासेट", पृष्ठभूमि का रंग: 'आरजीबी (255, 99, 132)', सीमा रंग: 'आरजीबी (255, 99, 132)', डेटा: [0, 10, 5, 2, 20, 30, 45], }] } });

    04. किसी भी झटके को रोकें

    चार्ट.जेएस परिष्कृत आकार बदलने वाले तर्क के साथ आता है, जो - दुर्भाग्य से - समय-समय पर स्क्रीन आकार गलत हो जाता है। के आकार को सीमित करना [2 9] & lt; कैनवास और जीटी;

    सीएसएस के माध्यम से तत्व, दुख की बात है, चाल नहीं करता है। इसके बजाए, चार्ट क्लास कंस्ट्रक्टर के साथ विकल्प फ़ील्ड के माध्यम से दोनों पहलू अनुपात रखरखाव और प्रतिक्रिया अक्षम की जानी चाहिए। 
     & lt; कैनवास आईडी = "वर्करिया" शैली = "चौड़ाई: 800px;
ऊंचाई: 600px; "& gt; & lt; / canvas & gt; & lt; / कैनवास & gt;
& lt; स्क्रिप्ट और जीटी;
(समारोह() {
var ctx = दस्तावेज़।
GetElementById ('वर्करिया')। GetContext ('2 डी');
वर चार्ट = नया चार्ट (सीटीएक्स,
{
टाइप: 'लाइन',

विकल्प: {
उत्तरदायी: गलत, रखरखाव ascratio:
FALSE},

    05. लेआउट जोड़ें

    पैराफ्रेश करने के लिए आंद्रेई तुपोलेव: अब जब छोटा उड़ रहा है, तो हम बड़े को लाएं। मचान इस चरण के साथ दिखाया गया है 'हमारे आरेख को गुणा करता है - एक कैनवास तत्व के साथ काम करने के बजाय, अब हम उनमें से कुल चार बनाते हैं और उन्हें एक फैशन में एक फैशन में स्क्रीन पर व्यवस्थित करते हैं। अफसोस की बात है, यह इरादा के रूप में काफी काम नहीं करता है। 

     & lt; कैनवास आईडी = "वर्करेरिया"
शैली = "स्थिति: पूर्ण; शीर्ष: 0%; बाएं: 0%;
चौड़ाई: 49%; ऊंचाई: 49%; "& gt; & lt; / canvas & gt; & lt; / कैनवास और gt;
& lt; कैनवास आईडी = "वर्करिया 2"
शैली = "स्थिति: पूर्ण; शीर्ष: 0%; बाएं: 51%;
चौड़ाई: 49%; ऊंचाई: 49%; "& gt; & lt; / canvas & gt; & lt; / कैनवास और gt;
& lt; कैनवास आईडी = "वर्करेए 3"
शैली = "स्थिति: पूर्ण; शीर्ष: 51%; बाएं: 0%;
चौड़ाई: 49%; ऊंचाई: 49%; "& gt; & lt; / canvas & gt; & lt; / कैनवास और gt;
& lt; कैनवास आईडी = "वर्करेए 4"
शैली = "स्थिति: पूर्ण; शीर्ष: 51%; बाएं: 51%;
चौड़ाई: 49%; ऊंचाई: 49%; "& gt; & lt; / canvas & gt; & lt; / कैनवास & gt;

    06. किसी भी प्रतिपादन त्रुटियों को कम करें

    Wrapper <div> tags enforce a structure from the outside

    रैपर & lt; div & gt; टैग बाहर से एक संरचना को लागू करता है

    जटिल लेआउट में chart.js आरेखों को संभालने का सबसे सुरक्षित तरीका रैपर का उपयोग करना शामिल है [2 9] & lt; div & gt;

    टैग। वे बाहर से एक संरचना को लागू करते हैं, जिससे यह सुनिश्चित किया जाता है कि आंतरिक लेआउट इंजन आवश्यक से अधिक नुकसान नहीं कर सकता है। हालांकि, इस मामले में, उत्तरदायित्व सुविधा को फिर से सक्षम करने के लिए सुनिश्चित करें। [12 9] & lt; div शैली = "स्थिति: पूर्ण; शीर्ष: 0%; बाएं: 0%; चौड़ाई: 49%; ऊंचाई: 49%; "और जीटी; & lt; कैनवास आईडी = "वर्करिया" & gt; & lt; / कैनवास & gt; & lt; / कैनवास और जीटी; & lt; / div & gt; & lt; div शैली = "स्थिति: पूर्ण; शीर्ष: 0%; बाएं: 51%; चौड़ाई: 49%; ऊंचाई: 49%; "और जीटी; & lt; कैनवास आईडी = "वर्करिया 2" & gt; & lt; / कैनवास & gt; & lt; / कैनवास और जीटी; & lt; / div & gt; & lt; div शैली = "स्थिति: पूर्ण; शीर्ष: 51%; बाएं: 0%; चौड़ाई: 49%; ऊंचाई: 49%; "और जीटी; & lt; कैनवास आईडी = "वर्करिया 3" & gt; & lt; / canvas & gt; & lt; / कैनवास और जीटी; & lt; / div & gt; & lt; div शैली = "स्थिति: पूर्ण; शीर्ष: 51%; बाएं: 51%; चौड़ाई: 49%; ऊंचाई: 49%; "और जीटी; & lt; कैनवास आईडी = "वर्कएरा 4" & gt; & lt; / कैनवास & gt; & lt; / कैनवास और जीटी; & lt; / div & gt; & lt; स्क्रिप्ट और जीटी; document.addeventlistener ("Domcontentl oaded ", समारोह () { var ctx = दस्तावेज़। GetElementById ('वर्करिया')। GetContext ('2 डी'); var चार्ट = नया चार्ट (सीटीएक्स, { प्रकार: 'लाइन', विकल्प: {},

    07. बार्स का प्रयास करें

    [17 9] Creating bar charts is simple

    बार चार्ट बनाना सरल है

    हमेशा लाइन चार्ट प्रतिपादन जल्दी से थकाऊ हो जाता है। आइए टाइप प्रॉपर्टी को बार में बदलकर चीजों को स्प्रेस करें, जिससे बार आरेखों जैसे कि इस चरण के साथ आकृति में दिखाया गया है। हम पुन: उपयोग को खत्म करने के लिए डेटा क्षेत्र को 'वैश्विक' दायरे में बढ़ावा देते हैं।

    [12 9] & lt; स्क्रिप्ट और जीटी; document.addeventlistener ("DomcontentLoaded", फ़ंक्शन () { var myfield = { लेबल: ["जनवरी", "फरवरी", "मार्च", "अप्रैल", "मई", "जून", "जुलाई"], डेटासेट्स: [{ लेबल: "मेरा पहला डेटासेट", पृष्ठभूमि रंग: 'आरजीबी (255, 99, 132)', सीमावर्ती रंग: 'आरजीबी (255, 99, 132)', डेटा: [0, 10, 5, 2, 20, 30, 45], }] }; । । । CTX = दस्तावेज़। GetElementById ('वर्करिया 4')। GetContext ('2 डी'); चार्ट = नया चार्ट (सीटीएक्स, { टाइप करें: 'बार', विकल्प: {}, डेटा: मायफील्ड }); }); & lt; / स्क्रिप्ट & gt;

    08. पाई से बचें

    pie charts taking over the screen

    यदि आप उन्हें अपनी पूरी स्क्रीन भरना नहीं चाहते हैं तो पाई चार्ट को विशेष उपचार की आवश्यकता होती है

    सिद्धांत रूप में, एक पाई चार्ट एक ही लाइनों के साथ प्रस्तुत किया जा सकता है। समान उपस्थिति को रोकने के लिए रंग गुणों को हटाएं, और प्रकार की संपत्ति को पाई में सेट करें। अफसोस की बात है, यह काफी काम नहीं करता है - जब किया जाता है, तो पाई चार्ट पूरी स्क्रीन भर जाएगा। यह पाई रेंडरर की एक विशेषता के कारण होता है जो पाई त्रिज्या निर्धारित करने के लिए दो गुणों के 'बड़े' का उपयोग करता है।

    [12 9] var mypie = { लेबल: ["जनवरी", "फरवरी", "मार्च", "अप्रैल", "मई", "जून", "जुलाई"], डेटासेट्स: [{ लेबल: "मेरा पहला डेटासेट", डेटा: [0, 10, 5, 2, 20, 30, 45], }] }; ctx = document.getElementByID ('वर्करिया 2')। GetContext ('2 डी'); चार्ट = नया चार्ट (सीटीएक्स, { टाइप: 'पाई', विकल्प: {}, डेटा: मिफी });

    09. समस्या को हल करें

    चरण 1 में बनाई गई 'index.js' फ़ाइल खोलें। ग्राफ़ प्रकार को पंक्ति के रूप में निर्दिष्ट करके शुरू करें और नीचे दिखाए गए अनुसार डेटा को दृष्टि से दर्शाया गया है। 

     & lt; शरीर & gt;
& lt; div शैली = "स्थिति: पूर्ण; शीर्ष: 0%;
बाएं: 0%; चौड़ाई: 49%; ऊंचाई: 49%; "और जीटी;
& lt; कैनवास आईडी = "वर्करिया" & gt; & lt; /
कैनवास और जीटी; & lt; / कैनवास और जीटी;
& lt; / div & gt;
& lt; div शैली = "स्थिति: पूर्ण; शीर्ष: 0%;
बाएं: 51%; चौड़ाई: 2 9%; ऊंचाई: 49%; "और जीटी;
& lt; कैनवास आईडी = "वर्करिया 2" & gt; & lt; /
कैनवास और जीटी; & lt; / कैनवास और जीटी;
& lt; / div & gt;

    10. lat.js को आरेख को बचाने दें

    समस्या को हल करने के लिए एक और दृष्टिकोण में फिर से अक्षम करना शामिल है [2 9] स्वरुप अनुपात बनायें रखें

    सुविधा।इस तरह, आरेखण इंजन को आरेख को पुनर्विकास करने की अनुमति है क्योंकि यह फिट बैठता है, यह सुनिश्चित करता है कि पूरा सर्कल स्क्रीन पर दिखाई देता है। [12 9] ctx = document.getElementByID ('वर्करिया 2')। GetContext ('2 डी'); चार्ट = नया चार्ट (सीटीएक्स, { टाइप: 'पाई', विकल्प: {रखरखाव appectratio: गलत }, डेटा: मिफी });

    [2 9] अगला पृष्ठ: चार्ट.जेएस के साथ अपना इंटरैक्टिव चार्ट बनाएं

    • 1
    • [2 9] 2

    वर्तमान पृष्ठ: चार्ट.जेएस का उपयोग करना: चरण 01-10

    कैसे करना है - सर्वाधिक लोकप्रिय लेख

    44 of the best iPad shortcuts and gestures for iPadOS 2020

    कैसे करना है Sep 16, 2025

    (छवि क्रेडिट: भविष्य) [1 9] पर कूदना: ..

    How to kitbash on the go with Shapr3D

    कैसे करना है Sep 16, 2025

    (छवि क्रेडिट: एडम dewhirst) [1 9] Shapr3D किटबाशिंग के लिए �..

    Create a simple colour chart

    कैसे करना है Sep 16, 2025

    के साथ पकड़ना रंग सिद्धांत गणित या विज्ञान सीखने की तरह थोड़ा बहुत �..

    Master the Bridge tool

    कैसे करना है Sep 16, 2025

    पुल उपकरण क्या है? यदि आप सीजीआई के लिए नए है�..

    ज़ब्रश के साथ बेहतर वीडीएम के लिए 4 कदम

    कैसे करना है Sep 16, 2025

    फ्रीलांस 3 डी कलाकार और वर्टेक्स पैनलिस्ट माया �..

    उपयोगकर्ता के अनुकूल मोबाइल इंटरफेस कैसे डिजाइन करें

    कैसे करना है Sep 16, 2025

    कुछ मोबाइल डिज़ाइन एक समस्या से पीड़ित हैं: वे सत�..

    How to improve the performance of ecommerce sites

    कैसे करना है Sep 16, 2025

    Tammy Everts डिजाइन, प्रदर्शन और रूपांतरण दरो�..

    Get started in Amazon Lumberyard: setting up

    कैसे करना है Sep 16, 2025

    अमेज़न का नया गेम इंजन, लकड़ी यार्ड , खेल और स..

    श्रेणियाँ