Google Chart (Google Chart)
اینجا با «نمودار گوگل (Google Chart)» آشنا می شویم. «نمودار (Chart)» نمایش ساده داده هاست. مثل کارنامه مدرسه که نمره ها را تصویری می بینی. «کتابخانه (Library)» یعنی مجموعه ای از کدهای آماده. با این کتابخانه سریع نمودار می سازی.
شروع سریع با نمودار گوگل
مراحل کلی ساده است. اول یک ظرف بساز. سپس لودر را اضافه کن. بعد کتابخانه را بارگذاری کن. در پایان تابع رسم را اجرا کن.
- یک div با id یکتا بساز.
- اسکریپت لودر Google Charts را اضافه کن.
- بسته corechart را بارگذاری کن.
- تابع drawChart را اجرا کن.
// اسکلت کلی کار با نمودار گوگل;
// این کد را کنار HTML ظرفِ نمودار قرار بده;
// مثال های پایین نوع نمودار را نشان می دهند;
function drawChart() {
// اینجا بعداً داده و گزینه ها را می نویسیم;
}
ستون ها (Bar Chart)
«داده (Data)» جدول مقادیر است. «گزینه ها (Options)» تنظیمات ظاهری است. «رندر (Render)» یعنی رسم نهایی روی صفحه. این نمونه، تولید شراب کشورها را نشان می دهد.
function drawChart() {
const data = google.visualization.arrayToDataTable([
["Country", "Mhl"],
["Italy", 55],
["France", 49],
["Spain", 44],
["USA", 24],
["Argentina", 15]
]);
const options = {
title: "World Wide Wine Production"
};
const chart = new google.visualization.BarChart(
document.getElementById("myChart")
);
chart.draw(data, options);
}
دایره ای (Pie Chart)
تفاوت اصلی، نوع نمودار است. فقط BarChart را به PieChart تغییر بده. بقیه ساختار همان است.
function drawChart() {
const data = google.visualization.arrayToDataTable([
["Country", "Mhl"],
["Italy", 55],
["France", 49],
["Spain", 44],
["USA", 24],
["Argentina", 15]
]);
const options = {
title: "World Wide Wine Production"
};
const chart = new google.visualization.PieChart(
document.getElementById("myChart")
);
chart.draw(data, options);
}
دایره ای سه بعدی (3D Pie)
برای سه بعدی شدن، گزینه is3D را true کن. این فقط جلوه بصری را تغییر می دهد.
function drawChart() {
const data = google.visualization.arrayToDataTable([
["Country", "Mhl"],
["Italy", 55],
["France", 49],
["Spain", 44],
["USA", 24],
["Argentina", 15]
]);
const options = {
title: "World Wide Wine Production",
is3D: true
};
const chart = new google.visualization.PieChart(
document.getElementById("myChart")
);
chart.draw(data, options);
}
خطی (Line Chart)
نمودار خطی برای روندها عالی است. مثل رشد قد در سال ها. محور افقی hAxis است. محور عمودی vAxis است.
function drawChart() {
const data = google.visualization.arrayToDataTable([
["Price", "Size"],
[50, 7],
[60, 8],
[70, 8],
[80, 9],
[90, 9],
[100, 9],
[110, 10],
[120, 11],
[130, 14],
[140, 14],
[150, 15]
]);
const options = {
title: "House Prices vs. Size",
hAxis: { title: "Square Meters" },
vAxis: { title: "Price in Millions" },
legend: "none"
};
const chart = new google.visualization.LineChart(
document.getElementById("myChart")
);
chart.draw(data, options);
}
پراکندگی (Scatter Chart)
پراکندگی برای بررسی رابطه دو متغیر است. مثل قد و نمره ورزش. هر نقطه یک جفت مقدار است.
function drawChart() {
const data = google.visualization.arrayToDataTable([
["Price", "Size"],
[50, 7],
[60, 8],
[70, 8],
[80, 9],
[90, 9],
[100, 9],
[110, 10],
[120, 11],
[130, 14],
[140, 14],
[150, 15]
]);
const options = {
title: "House Prices vs. Size",
hAxis: { title: "Square Meters" },
vAxis: { title: "Price in Millions" },
legend: "none"
};
const chart = new google.visualization.ScatterChart(
document.getElementById("myChart")
);
chart.draw(data, options);
}
نکته: همیشه قبل از رسم، بسته corechart را بارگذاری کن. سپس نمودار مناسب را انتخاب کن. برای یادگیری بیشتر نمودار گوگل، از نمونه ها تمرین کن.
جمع بندی سریع
- نمودار گوگل سریع و آماده است.
- نوع نمودار را درست انتخاب کن.
- داده تمیز بده تا نتیجه خوب شود.
- با گزینه ها ظاهر را تنظیم کن.
- برای تمرین از ادیتور استفاده کن.
برای مقایسه کتابخانه ها، بخش Chart.js را ببین. همچنین برای کار با مرورگر، صفحه Navigator را مطالعه کن. این دو لینک به فهم نمودار گوگل کمک می کنند.