Chart.js
- পূর্ববর্তী পৃষ্ঠা JS Plotly.js
- পরবর্তী পৃষ্ঠা JS গোগল চার্ট
Chart.js একটি মুক্ত জেভাস্ক্রিপ্ট লাইব্রেরি, যা এইচটিএমএল ভিত্তিক চার্ট তৈরির জন্য ব্যবহৃত হয়。
এটা সবচেয়ে সহজ JavaScript ভিজুয়ালাইজেশন লাইব্রেরির মধ্যে একটি এবং নিচের ভুটায় একটি নিহিত চার্ট টাইপস রয়েছে:
- স্ক্যাটার প্লট (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>
ক্যানভাস এলিমেন্টকে একটি অভিন্ন id দিতে হবে。
এটি এভাবে হয়!
স্বাভাবিক স্পট চার্ট সংজ্ঞান:
const myChart = new Chart("myChart", {
data: {}
options: {}
});
স্বাভাবিক লাইন চার্ট সংজ্ঞান:
const myChart = new Chart("myChart", {
data: {}
options: {}
});
স্বাভাবিক বার চার্ট সংজ্ঞান:
const myChart = new Chart("myChart", {
type: "bar",
data: {}
options: {}
});
স্পট চার্ট
হাউজিং কার্স vs. এরিয়া
সূত্রকোড
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: [{
pointRadius: 4,
pointBackgroundColor: "rgba(0,0,255,1)",
data: xyValues
}]
},
options:{...}
});
লাইন চার্ট
হাউজিং কার্স vs. এরিয়া
সূত্রকোড
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", {
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", {
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", {
data: {
labels: xValues,
datasets: [{
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: "বিশ্ব বিনাস উৎপাদন"
}
}
});
ডোহনাট চিত্র
শুধুমাত্র type কে "pie" পরিবর্তন করা হয় "doughnut"：
type: "doughnut";
- পূর্ববর্তী পৃষ্ঠা JS Plotly.js
- পরবর্তী পৃষ্ঠা JS গোগল চার্ট
