JS का Chart.js
In this page:
new Chart(canvasElement, {
type: "bar",
data: { labels: [], datasets: [{ data: [] }] },
options: {}
});Chart.js Setup करना
Chart.js को एक <script> tag (किसी CDN से या local copy से) के ज़रिए शामिल किया जाता है, जिसके बाद global Chart constructor उपलब्ध हो जाता है -- new Chart(canvasElement, config) फिर उस canvas पर तुरंत एक chart बनाता और render करता है।
उदाहरण: Setting Up Chart.js
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Draw a bar chart into the canvas, with two bars labeled "A" and "B"
new Chart(document.getElementById("myChart"), {
type: "bar",
data: { labels: ["A", "B"], datasets: [{ data: [10, 20] }] },
});
</script>Chart Types
configuration object में type field chart style चुनता है -- bar charts के लिए "bar", line graphs के लिए "line", proportion charts के लिए "pie" और "doughnut", multi-axis comparisons के लिए "radar" -- एक जैसी data/options structure हर एक के हिसाब से adapt होती है।
उदाहरण: Chart Types
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Draw a pie chart into the canvas, split between "Yes" and "No"
new Chart(document.getElementById("myChart"), {
type: "pie",
data: { labels: ["Yes", "No"], datasets: [{ data: [70, 30] }] },
});
</script>Data और Datasets Configure करना
data object में labels (किसी axis पर या legend में दिखने वाली categories) और एक या ज़्यादा datasets होते हैं, हर एक की अपनी values और visual styling (जैसे backgroundColor) -- एक chart पर कई datasets आपको एक साथ कई data series compare करने देते हैं।
उदाहरण: Configuring Data and Datasets
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Draw a bar chart comparing two datasets (2023 vs 2024) across Jan/Feb
new Chart(document.getElementById("myChart"), {
type: "bar",
data: {
labels: ["Jan", "Feb"],
datasets: [
{ label: "2023", data: [10, 20], backgroundColor: "blue" },
{ label: "2024", data: [15, 25], backgroundColor: "green" },
],
},
});
</script>एक Chart को Dynamically Update करना
किसी chart instance की .data property को सीधे modify किया जा सकता है (जैसे किसी dataset की data array को फिर से assign करना), और बाद में chart पर .update() कॉल करना पूरे chart को destroy और recreate किए बिना नई values में एक animated transition के साथ उसे फिर से draw करता है।
उदाहरण: Updating a Chart Dynamically
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const chart = new Chart(document.getElementById("myChart"), {
type: "bar",
data: { labels: ["A", "B"], datasets: [{ data: [10, 20] }] },
});
chart.data.datasets[0].data = [30, 5];
chart.update(); // animated transition to new values
</script>किसी Chart को दोबारा बनाने से पहले उसे Destroy करना
पहले original को destroy किए बिना उसी canvas पर एक दूसरा Chart instance बनाने की कोशिश करना overlapping या टूटा हुआ rendering देता है -- मौजूदा chart instance पर .destroy() कॉल करना एक नया बनने से पहले उसे सही तरीके से साफ कर देता है।
उदाहरण: Destroying a Chart Before Recreating It
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let chart = new Chart(document.getElementById("myChart"), {
type: "bar",
data: { labels: ["A"], datasets: [{ data: [5] }] },
});
chart.destroy(); // clean up before recreating
chart = new Chart(document.getElementById("myChart"), {
type: "line",
data: { labels: ["A"], datasets: [{ data: [10] }] },
});
</script>- Chart constructor इस्तेमाल करने से पहले Chart.js script को खुद शामिल करना भूल जाना, जिससे एक "Chart is not defined" error आता है।
- API के element खुद expect करने पर canvas element की ID को string की तरह pass करना (या इसका उल्टा) -- Chart.js दोनों accept करता है, लेकिन अपने खुद के helper code में उन्हें मिला देना confusion पैदा कर सकता है।
- same canvas पर एक नया chart बनाने से पहले existing chart instance पर .destroy() कॉल न करना, overlapping या ghost charts छोड़ते हुए।
- new Chart(canvasElement, config) एक chart बनाता है, जहाँ config chart type, data, और options specify करता है।
- Chart.js type field के ज़रिए कई built-in chart types (bar, line, pie, doughnut, radar, और ज़्यादा) support करता है।
- किसी chart का data update करना और .update() कॉल करना पूरे chart को दोबारा बनाए बिना smooth transitions के साथ उसे refresh कर देता है।
Chart.js Canvas support करने वाले हर modern browser में काम करता है, जो current browsers में प्रभावी रूप से universal है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: