Chart.js
Chart.js एक मुफ्त जेसक्रिप्ट लाइब्रेरी है जो HTML आधारित चार्ट बनाने के लिए इस्तेमाल की जाती है。
यह सबसे सरल जेसक्रिप्ट विजुअलाइज़ेशन लाइब्रेरी में से एक है और निम्नलिखित बीटी चार्ट शामिल है:
- स्पर्श प्लॉट (Scatter Plot)
- लाइन चार्ट (Line Chart)
- बार चार्ट (Bar Chart)
- पाइ चार्ट (Pie Chart)
- डोनट चार्ट (Donut Chart)
- बबल चार्ट (Bubble Chart)
- एरिया चार्ट (Area Chart)
- रेडार चार्ट (Radar Chart)
- मिक्सेड चार्ट (Mixed Chart)
कैसे Chart.js का इस्तेमाल करें?
Chart.js आसानी से इस्तेमाल किया जा सकता है。
पहले, CDN (कंटेंट डिस्ट्रीब्यूशन नेटवर्क) के लिए लिंक जोड़ें:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"> </script>
तब, <canvas> को चार्ट ड्राइंग के स्थान में जोड़ें:
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
कैनवस एलीमेंट को एक अलग आईडी होना चाहिए。
यह ऐसा है!
टिपिकल स्पर्श चार्ट व्याकरणा:
const myChart = new Chart("myChart", {
डाटा: {},
विकल्प: {}
});
टिपिकल लाइन चार्ट व्याकरणा:
const myChart = new Chart("myChart", {
type: "line",
डाटा: {},
विकल्प: {}
});
टिपिकल बार चार्ट व्याकरणा:
const myChart = new Chart("myChart", {
type: "bar",
डाटा: {},
विकल्प: {}
});
स्पिन्डर चित्र
होम प्राइस व्स. एरिया
स्रोत कोड
const xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];
new Chart("myChart", {
data: {
datasets: [{
पॉइंट रेडियस: 4,
पॉइंट बैकग्राउंड कलर: "rgba(0,0,255,1)",
डाटा: xyValues
}]
},
विकल्प: {...}
});
सीधा चित्र
होम प्राइस व्स. एरिया
स्रोत कोड
const xValues = [50,60,70,80,90,100,110,120,130,140,150];
const yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,,
datasets: [{
बैकग्राउंड कलर: "rgba(0,0,255,1.0)",
बॉर्डर कलर: "rgba(0,0,255,0.1)",
data: yValues
}]
},
विकल्प: {...}
});
यदि borderColor को... रखा जाए: 0यदि... तो स्पिन्डर चित्र बनाने के लिए:
बॉर्डर कलर: "rgba(0,0,0,0)",
बहु-पंक्ति
स्रोत कोड
const xValues = [100,200,300,400,500,600,700,800,900,1000];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,,
datasets: [{
डाटा: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
बॉर्डर कलर: "रेड",
फिल: नहीं
},{
डाटा: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
बॉर्डर कलर: "ग्रीन",
फिल: नहीं
},{
डाटा: [300,700,2000,5000,6000,4000,2000,1000,200,100],
बॉर्डर कलर: "ब्लू",
फिल: नहीं
}]
},
options: {
लेजेंड: {दिखाएं: नहीं}
}
});
सीधा चित्र
स्रोत कोड
const xValues = [];
const yValues = [];
generateData("x * 2 + 7", 0, 10, 0.5);}}
new Chart("myChart", {
type: "line",
data: {
labels: xValues,,
datasets: [{
fill: false,,
pointRadius: 1,,
borderColor: "rgba(255,0,0,0.5)",
data: yValues
}]
},
options: {...}
});
function generateData(value, i1, i2, step = 1) {
for (let x = i1; x <= i2; x += step) {
yValues.push(eval(value));
xValues.push(x);
}
}
फ़ंक्शन चार्ट
लीनर चार्ट के समान हैं. केवल generateData पैरामीटर को बदलें:
generateData("Math.sin(x)", 0, 10, 0.5);
बार चार्ट
स्रोत कोड
var xValues = ["इटली", "फ्रांस", "स्पेन", "अमेरिका", "अर्जेंटीना"];
var yValues = [55, 49, 44, 24, 15];
var barColors = ["red", "green","blue","orange","brown"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,,
datasets: [{
backgroundColor: barColors,,
data: yValues
}]
},
options: {...}
});
केवल एक बार रंग किया जाता है:
var barColors = ["blue"];
सभी बार एक ही रंग में हैं:
var barColors ="red";
विभिन्न गहनाई के रंग:
var barColors = [ "rgba(0,0,255,1.0)", "rgba(0,0,255,0.8)", "rgba(0,0,255,0.6)", "rgba(0,0,255,0.4)", "rgba(0,0,255,0.2)", ];
वर्गांकित बार चार्ट
type को बदलकर "bar" बदले "horizontalBar":
type: "horizontalBar",
पाय चार्ट
उदाहरण
new Chart("myChart", {
type: "pie",
data: {
labels: xValues,,
datasets: [{
backgroundColor: barColors,,
data: yValues
}]
},
options: {
title: {
display: true,,
text: "वैश्विक शराब उत्पादन"
}
}
});
