گرافیک (Graphics)
اینجا درباره «گرافیک جاوااسکریپت» حرف می زنیم؛ یعنی رسم نمودارها و شکل ها. «کتابخانه (Library)» مجموعه آماده کد است. با آن سریع تر پیش می روی و کمتر اشتباه می کنی.
کتابخانه های گرافیکی محبوب
سه گزینه پرکاربرد معرفی شده اند: Plotly.js، Chart.js و Google Chart. هرکدام چندین نوع نمودار دارند و برای درس، بازی، یا آمار کلاس عالی اند.
مثال Plotly.js: نمودار دایره ای
«نمودار دایره ای (Pie)» درصدها را مثل برش های پیتزا نشان می دهد. با چند خط، آماده می شود.
const xArray = [
"Italy",
"France",
"Spain",
"USA",
"Argentina"
];
const yArray = [55, 49, 44, 24, 15];
const data = [
{
labels: xArray,
values: yArray,
type: "pie"
}
];
const layout = {
title: "World Wide Wine Production"
};
Plotly.newPlot("myPlot24", data, layout);
مثال Chart.js: نمودار میله ای
«نمودار میله ای (Bar)» مقایسه عددی را واضح نشان می دهد. مثل نمره های چند کلاس.
const chart13 = new Chart("myPlot13", {
type: "bar",
data: {
labels: [
"Italy",
"France",
"Spain",
"USA",
"Argentina"
],
datasets: [
{
backgroundColor: [
"red",
"green",
"blue",
"orange",
"brown"
],
data: [55, 49, 44, 24, 15]
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
},
title: {
display: true,
text: "World Wide Wine Production 2018",
fontSize: 16
}
}
});
Google Chart: انواع زیاد، راه اندازی ساده
Google Chart از «Scatter» تا «Geo Chart» دارد. برای داشبوردهای درسی و آماری عالی است. راه اندازی اش ساده است و نمودارهای شکیل می دهد.
گام های عملی
- کتابخانه مناسب هدفت را انتخاب کن.
- یک ظرف HTML مثل div یا canvas بساز.
- آرایه برچسب ها و اعداد را آماده کن.
- نوع نمودار و تنظیمات را تعریف کن.
- تابع رسم را صدا بزن و نتیجه را ببین.
نکته: اگر صفحه تو آموزشی است، «گرافیک جاوااسکریپت» را در Canvas هم دنبال کن.
جمع بندی سریع
- Plotly.js نمودارهای متنوع و تعاملی دارد.
- Chart.js سبک و خوش دست است.
- Google Chart برای داشبورد عالی است.
- داده تمیز یعنی نمودار خواناتر.
- اول ساده بکش، بعد سفارشی کن.
برای مرور DOM هم سر بزن به jQuery DOM.