چارٹ جے ایس
- پچھلئی پیج پلٹلی جے ایس
- نکس پیج گوجل
Chart.js ਮੁਫਤ ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਾਇਬ੍ਰੇਰੀ ਹੈ ਜੋ ਹੈਂਡਲ ਹੈਂਡਲ ਚਾਰਟ ਬਣਾਉਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ。
ਇਹ ਸਭ ਤੋਂ ਸਰਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿਜ਼ੂਅਲਾਈਜ਼ੇਸ਼ਨ ਲਾਇਬ੍ਰੇਰੀਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਅਤੇ ਨਿਮਨਲਿਖਤ ਬੁਟਨ ਚਾਰਟ ਸ਼ਾਮਲ ਹਨ:
- ਸਕੈਟਰ ਚਾਰਟ (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>
canvas ਐਲੀਮੈਂਟ ਨੂੰ ਇੱਕ ਅਲਗ ਆਈਡੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ。
ਇਹ ਅਜਿਹਾ ਹੈ!
ਮਿਸਾਲੀ ਸਕੈਟਰ ਚਾਰਟ ਗਰਿੱਖ
const myChart = new Chart("myChart", {
type: "scatter",
data: {},
options: {}
});
ਮਿਸਾਲੀ ਲਾਈਨ ਚਾਰਟ ਗਰਿੱਖ
const myChart = new Chart("myChart", {
type: "line",
data: {},
options: {}
});
ਮਿਸਾਲੀ ਬੈਰ ਚਾਰਟ ਗਰਿੱਖ
const myChart = new Chart("myChart", {
type: "bar",
data: {},
options: {}
});
ਸਪੈਕਟਰ ਚਿੱਤਰ
ਮਕਾਨ ਦਾ ਪ੍ਰਿਸ਼ਟ ਵਿਰੁੱਧ ਖੇਤਰ
ਸਰੋਤ ਕੋਡ
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", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgba(0,0,255,1)",
data: xyValues
}]
},
options:{...}
});
ਰੇਖਾ ਚਿੱਤਰ
ਮਕਾਨ ਦਾ ਪ੍ਰਿਸ਼ਟ ਵਿਰੁੱਧ ਖੇਤਰ
ਸਰੋਤ ਕੋਡ
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: [{
backgroundColor:"rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues
}]
},
options:{...}
});
ਜੇਕਰ borderColor ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾਵੇ 0، ਤਾਂ ਸਪੈਕਟਰ ਚਿੱਤਰ ਵਿੱਚ ਲੰਬਾ ਚਿੱਤਰ ਦਰਸਾਇਆ ਜਾ ਸਕਦਾ ਹੈ:
borderColor: "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: [{
data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
borderColor: "red",
fill: false
},{
data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
borderColor: "green",
fill: false
},{
data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
borderColor: "blue",
fill: false
}]
},
options: {
legend: {display: false}
}
});
ਰੇਖਾ ਚਿੱਤਰ
ਸਰੋਤ ਕੋਡ
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: "ਵਿਸ਼ਵ ਵਾਈਨ ਉਤਪਾਦਨ"
}
}
});
- پچھلئی پیج پلٹلی جے ایس
- نکس پیج گوجل
