Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript Chart.js

Chart.js एक ओपन सोर्स JavaScript लाइब्रेरी है। Chart.js का उपयोग करके, अपनी वेबसाइट पर एनिमेटेड, इंटरैक्टिव ग्राफ जोड़ें।

JavaScript में Chart.js लाइब्रेरी का कोड निम्न है:

उदाहरण

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> </head> <body> <canvas id="myChart" width="500" height="300"></canvas> <script type="text/javascript"> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["2005", "2007" , "2009" , "2012", "2014"], datasets: [{ label: 'HouseHold income', data: [5000,8000,10000,1200,15000], backgroundColor :['rgba(255, 129, 102, 1)', 'rgba(234, 162, 235, 1)', 'rgba(255, 206, 36, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)'] }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script> </body> </html>

आउटपुट

JavaScript Chart.js

  1. JavaScript Random नंबर JavaScript Random नंबर

    Math.random() फंक्शन का उपयोग 0 और 1 के बीच एक रैंडम फ्लोटिंग-पॉइंट नंबर उत्पन्न करने के लिए किया जाता है।उदाहरण<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-sc

  1. JavaScript Promises JavaScript Promises

    JavaScript में Promises हमें एसिंक्रोनस ऑपरेशन करने की अनुमति देते हैं जहां वैल्यू प्रॉमिस बनाते समय पहले से ज्ञात नहीं होती। एक प्रॉमिस की तीन अवस्थाएं हो सकती हैं: पेंडिंग, फुलफिल्ड और रिजेक्टेड।उदाहरण<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

  1. JavaScript WeakSet JavaScript WeakSet

    JavaScript WeakSet का उपयोग ऑब्जेक्ट्स के संग्रह को स्टोर करने के लिए किया जाता है। Set की तरह यह डुप्लिकेट स्टोर नहीं करता।WeakSet के मेथड्समेथडविवरणadd(obj)WeakSet में नया वैल्यू जोड़ता है।delete(obj)WeakSet से वैल्यू हटाता है।has(obj)True या false लौटाता है यह इस पर निर्भर करता है कि WeakSet ऑब्ज