Chart.js (Chart.js)
«کتابخانه Chart.js» برای رسم نمودار ساده است. «کتابخانه (Library)» یعنی جعبه ابزار آماده کدنویسی. همچنین «CDN» فایل آماده روی اینترنت است. با چند خط کد، نمودار می بینی.
راه اندازی Chart.js
اول اسکریپت را از CDN اضافه کن. سپس یک «بوم (Canvas)» بساز.
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0"></script>
<canvas id="myChart" style="width:100%25;max-width:700px"></canvas>
الگوی پایه نمودارها
نوع نمودار را در type بده. داده ها را در data بچین.
const myChartBar = new Chart("myChart", {
type: "bar",
data: {},
options: {}
});
const myChartLine = new Chart("myChart", {
type: "line",
data: {},
options: {}
});
نمودار ستونی (Bar)
برای مقایسه دسته ها عالی است. مثل نمرات کلاس ها.
const xValues = [
"Italy",
"France",
"Spain",
"USA",
"Argentina"
];
const yValues = [
55,
49,
44,
24,
15
];
const barColors = [
"red",
"green",
"blue",
"orange",
"brown"
];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [
{
backgroundColor: barColors,
data: yValues
}
]
},
options: {}
});
فقط ستون های آبی
همه ستون ها یک رنگ باشند، آرایه رنگ تک عضوی بده.
const barColors = [
"blue"
];
سایه روشن رنگ
شدت رنگ را با آلفا تنظیم کن. شفافیت را بهتر ببین.
const 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)"
];
ستون افقی
محور شاخص را روی y بگذار تا افقی شود.
indexAxis: "y",
نمودار دایره ای (Pie)
برای نمایش سهم هر بخش عالی است. مثل سهم فروش.
new Chart("myChart", {
type: "pie",
data: {
labels: xValues,
datasets: [
{
backgroundColor: barColors,
data: yValues
}
]
},
options: {}
});
نمودار دونات (Doughnut)
مثل Pie است. فقط وسطش خالی می شود.
type: "doughnut";
نمودار پراکندگی (Scatter)
رابطه دو ویژگی را می بینی. مثل متراژ و قیمت.
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: {}
});
نمودار خطی (Line)
روند تغییرات را نشان می دهد. مثل رشد ماهانه.
const xVals = [
50,
60,
70,
80,
90,
100,
110,
120,
130,
140,
150
];
const yVals = [
7,
8,
8,
9,
9,
9,
10,
11,
14,
14,
15
];
new Chart("myChart", {
type: "line",
data: {
labels: xVals,
datasets: [
{
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yVals
}
]
},
options: {}
});
تبدیل Line به Scatter
اگر خط نمی خواهی، رنگ حاشیه را شفاف کن.
borderColor: "rgba(0,0,0,0)",
چند خط روی یک نمودار
چند «dataset» اضافه کن تا خطوط هم زمان ترسیم شوند.
const labels = [
100,
200,
300,
400,
500,
600,
700,
800,
900,
1000
];
new Chart("myChart", {
type: "line",
data: {
labels: labels,
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: {}
});
نمودار خطیِ تابع خطی
با «generateData» مقدار بساز. سپس نمودار تابع را رسم کن.
const xValues = [];
const yValues = [];
function generateData(value, i1, i2, step = 1) {
for (let x = i1; x <= i2; x += step) {
yValues.push(eval(value));
xValues.push(x);
}
}
generateData("x * 2 + 7", 0, 10, 0.5);
const ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "line",
data: {
labels: xValues,
datasets: [
{
fill: false,
pointRadius: 1,
borderColor: "rgba(255,0,0,0.5)",
data: yValues
}
]
},
options: {}
});
نمودار تابع سینوسی
فقط فرمول را عوض کن. شکل موجی می بینی.
const xs = [];
const ys = [];
function generateData(value, i1, i2, step = 1) {
for (let x = i1; x <= i2; x += step) {
ys.push(eval(value));
xs.push(x);
}
}
generateData("Math.sin(x)", 0, 10, 0.5);
new Chart("myChart", {
type: "line",
data: {
labels: xs,
datasets: [
{
fill: false,
pointRadius: 1,
tension: 0.4,
borderColor: "rgba(0,0,255,0.5)",
data: ys
}
]
},
options: {}
});
گام های عملی سریع
- Chart.js را از CDN اضافه کن.
- یک canvas با id یکتا بساز.
- labels و datasets را مقداردهی کن.
- type مناسب را انتخاب کن.
- با options ظاهر را تنظیم کن.
نکته: محور ها را نام گذاری کن. درک نمودار راحت تر می شود.
جمع بندی سریع
- Chart.js ساده و سبک است.
- Bar برای مقایسه گروه هاست.
- Pie و Doughnut سهم را نشان می دهند.
- Scatter رابطه دو ویژگی را می دهد.
- Line روند تغییرات را نشان می دهد.
بخش های دیگر گرافیک را هم ببین: گرافیک جاوااسکریپت و Plotly. همچنین برای آشنایی بیشتر با کتابخانه Chart.js همین صفحه مرجع خوبی است.