بررسی اجمالی
انواع داده های ستون dataTable date و datetime از کلاس جاوا اسکریپت Date داخلی استفاده می کنند.
مهم: در اشیاء تاریخ جاوا اسکریپت، ماه‌ها از صفر شروع می‌شوند و تا یازده بالا می‌روند، به طوری که ژانویه ماه 0 و دسامبر ماه 11 است.
تاریخ ها و زمان ها با استفاده از سازنده تاریخ
تاریخ ها با استفاده از سازنده تاریخ
برای ایجاد یک شیء Date جدید، سازنده Date() را با کلمه کلیدی new با آرگومان هایی برای تعیین اجزای تاریخ فراخوانی می کنید. این آرگومان ها به شکل چندین عدد مربوط به ویژگی های مختلف تاریخ شما هستند.
new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)
هنگام استفاده از سازنده تاریخ با نوع داده date ، فقط باید سال، ماه و روز را مشخص کنید.
سازنده تاریخ همچنین می‌تواند به این شکل باشد: new Date(Milliseconds) ، که در آن میلی‌ثانیه فاصله تاریخ مورد نظر از 1 ژانویه 1970 ساعت 00:00:00 UTC بر حسب میلی‌ثانیه است. برای تاریخ ها و زمان های قبل از آن تاریخ، عدد منفی میلی ثانیه داده می شود.
استفاده از سازنده Date هنگام ساخت دستی DataTable با استفاده از متدهای addColumn() ، addRow() و addRows() و همچنین متد arrayToDataTable() مفید است. با این حال، اگر از JSON برای تعیین داده ها استفاده می شود، باید از نمایش رشته استفاده شود.
سازنده تاریخ جاوا اسکریپت همچنین می تواند نمایش رشته ای از تاریخ را به عنوان آرگومان بپذیرد. این رشته می تواند چندین شکل مختلف داشته باشد. قابل اطمینان ترین فرم ها با مشخصات RFC 2822 یا مشخصات ISO 8601 مطابقت دارند. فرمت های این موارد عبارتند از:
- RFC 2822 —
'MMM DD, YYYY'یا'DD MMM, YYYY'(مثال:new Date('Jan 1, 2015')یاnew Date('1 Jan, 2015')) - ISO 8601 —
'YYYY-MM-DD'(مثال:new Date('2015-01-01'))
اخطار: نمایش رشته در سازنده تاریخ ممکن است توسط مرورگرهای مختلف و نسخه های مختلف مرورگرها به طور متفاوتی تجزیه شود، بنابراین تاریخ های متفاوتی را برای رشته مشابه برمی گرداند. به این ترتیب، ارسال رشته ها به سازنده تاریخ توصیه نمی شود. درعوض، تشویق می‌شود که فقط از اعداد برای آرگومان‌های سازنده تاریخ استفاده شود.
جدول زمانی زیر قهرمان سوپر باول هر فصل NFL از سال 2000 را نشان می دهد.
در زیر کد ایجاد این خط زمانی آمده است. به استفاده از سازنده های new Date() و اعداد داده شده برای هر تاریخ با استفاده از ماه های مبتنی بر 0 همانطور که قبلا ذکر شد توجه کنید.
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Team');
data.addColumn('date', 'Season Start Date');
data.addColumn('date', 'Season End Date');
data.addRows([
['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5)],
['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5)],
['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5)],
['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5)],
['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5)],
['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5)],
['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5)],
['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5)],
['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5)],
['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5)],
]);
var options = {
height: 450,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
Datetimes با استفاده از Date Constructor
نوع داده ستون DataTable datetime از همان سازنده Date به عنوان نوع داده date استفاده می کند، اما اکنون از همه آرگومان ها برای پر کردن زمان استفاده می کند.
متناوبا، یک نمایش رشته ای از datetime نیز می تواند به سازنده Date منتقل شود. یک نمایش رشته ای از datetime شامل اضافه کردن ساعت ها، دقیقه ها و ثانیه ها، علاوه بر افست منطقه زمانی 4 رقمی است (مثلاً زمان استاندارد اقیانوس آرام (PST) 0800- است). برای مشخصات RFC 2822، زمان و منطقه زمانی با فاصله بین تاریخ و زمان، و زمان و منطقه زمانی اضافه می‌شوند. در مشخصات ISO 8601، هیچ فاصله ای وجود ندارد، در عوض تاریخ با حروف بزرگ "T" برای نشان دادن یک جزء زمانی دنبال می شود. همچنین بین زمان و منطقه زمانی فاصله وجود ندارد. رشته datetime کامل تاریخ برای 6 دسامبر 2014 در ساعت 10:30 صبح به وقت PST خواهد بود:
- RFC 2822 —
Dec 6, 2014 10:30:00 -0800. - ISO 8601 —
2014-12-06T10:30:00-0800.
هشدار: مجدداً، نمایش رشته ممکن است توسط مرورگرها/نسخه های مختلف به طور متفاوتی تجزیه شود. قابل‌توجه، هنگام برخورد با زمان و مناطق زمانی، تفاوت‌هایی در این وجود دارد که آیا تاریخ با منطقه زمانی UTC (GMT) برگردانده می‌شود یا به زمان محلی بازگردانده می‌شود. این دلیل دیگری است که چرا استفاده از رشته های datetime توصیه نمی شود.
جدول زمانی زیر با استفاده از نوع داده تاریخ، میانگین یک روز را تجزیه می کند.
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Activity', 'Start Time', 'End Time'],
['Sleep',
new Date(2014, 10, 15, 0, 30),
new Date(2014, 10, 15, 6, 30)],
['Eat Breakfast',
new Date(2014, 10, 15, 6, 45),
new Date(2014, 10, 15, 7)],
['Get Ready',
new Date(2014, 10, 15, 7, 4),
new Date(2014, 10, 15, 7, 30)],
['Commute To Work',
new Date(2014, 10, 15, 7, 30),
new Date(2014, 10, 15, 8, 30)],
['Work',
new Date(2014, 10, 15, 8, 30),
new Date(2014, 10, 15, 17)],
['Commute Home',
new Date(2014, 10, 15, 17),
new Date(2014, 10, 15, 18)],
['Gym',
new Date(2014, 10, 15, 18),
new Date(2014, 10, 15, 18, 45)],
['Eat Dinner',
new Date(2014, 10, 15, 19),
new Date(2014, 10, 15, 20)],
['Get Ready For Bed',
new Date(2014, 10, 15, 21),
new Date(2014, 10, 15, 22)]
]);
var options = {
height: 450,
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
تاریخ ها، زمان ها و مناطق زمانی
استفاده از سازنده تاریخ، چه برای date و چه datetime ، تاریخ یا زمان مورد نظر را در منطقه زمانی تعیین شده توسط مرورگر کاربر برمی گرداند. تنظیم شیء Date خود بر روی یک منطقه زمانی خاص به چند روش امکان پذیر است. ابتدا، Google Charts یک Formatter تاریخ ارائه می‌کند که در آن می‌توانید timeZone را مشخص کنید. این یک مقدار قالب‌بندی شده برای هر یک از مقادیر date و datetime در DataTable شما ارائه می‌کند. همچنین می توانید یک رشته را به عنوان آرگومان خود به سازنده new Date() ارسال کنید، یا می توانید آرگومان های خود را در متد Date.UTC() بپیچید، مانند:
new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))
این یک شی Date را به تاریخ و زمان مشخص شده در منطقه زمانی UTC (GMT) تنظیم می کند. از آنجا می توانید افست مورد نظر را برای منطقه زمانی محاسبه کنید و تاریخ و زمان خود را به دلخواه تنظیم کنید.
تاریخ ها و زمان ها با استفاده از نمایش رشته تاریخ
هنگام سریال سازی داده ها با استفاده از نماد لغوی شی جاوا اسکریپت DataTable برای ساخت DataTable شما، سازنده new Date() نمی تواند استفاده شود. در عوض، نمودارهای Google نمایش رشته تاریخ را ارائه می‌کند که به شما امکان می‌دهد هنگام ایجاد یک DataTable، date یا datetime شما به‌درستی سریال‌سازی و تجزیه شود. این قالب رشته تاریخ به سادگی کلمه کلیدی new را حذف می کند و عبارت باقی مانده را در علامت نقل قول قرار می دهد:
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
مهم: هنگام استفاده از این نمایش رشته تاریخ، مانند زمانی که از سازنده new Date() استفاده می‌کنید، ماه‌ها از صفر شروع می‌شوند (ژانویه ماه 0، دسامبر ماه 11 است).
در زیر همان جدول زمانی Super Bowl از قبل وجود دارد، اما اکنون از نماد تحت اللفظی شی جاوا اسکریپت و قالب رشته تاریخ استفاده می‌شود.
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable({
cols: [
{id: 'team', label: 'Team', type: 'string'},
{id: 'start', label: 'Season Start Date', type: 'date'},
{id: 'end', label: 'Season End Date', type: 'date'}
],
rows: [
{c: [{v: 'Baltimore Ravens'}, {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
{c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
{c: [{v: 'Indianapolis Colts'}, {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
{c: [{v: 'New York Giants'}, {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
{c: [{v: 'New Orleans Saints'}, {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
{c: [{v: 'Green Bay Packers'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
{c: [{v: 'New York Giants'}, {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]},
{c: [{v: 'Baltimore Ravens'}, {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]},
{c: [{v: 'Seattle Seahawks'}, {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]}
]
});
var options = {
height: 450,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
این قالب را می توان در متد arrayToDataTable() نیز استفاده کرد، مشروط بر اینکه در آرایه اول، جایی که برچسب های ستون مشخص شده است، ستون لازم را از type: 'date' یا type: 'datetime' اعلام کنید.
var data = google.visualization.arrayToDataTable([
["Team", {type: 'date', label: 'Season Start Date'}, {type: 'date', label: 'Season End Date'}],
["Baltimore Ravens", "Date(2000, 8, 5)", "Date(2001, 1, 5)"],
["New England Patriots", "Date(2001, 8, 5)", "Date(2002, 1, 5)"],
["Tampa Bay Buccaneers", "Date(2002, 8, 5)", "Date(2003, 1, 5)"],
["New England Patriots", "Date(2003, 8, 5)", "Date(2004, 1, 5)"],
["New England Patriots", "Date(2004, 8, 5)", "Date(2005, 1, 5)"],
["Pittsburgh Steelers", "Date(2005, 8, 5)", "Date(2006, 1, 5)"],
["Indianapolis Colts", "Date(2006, 8, 5)", "Date(2007, 1, 5)"],
["New York Giants", "Date(2007, 8, 5)", "Date(2008, 1, 5)"],
["Pittsburgh Steelers", "Date(2008, 8, 5)", "Date(2009, 1, 5)"],
["New Orleans Saints", "Date(2009, 8, 5)", "Date(2010, 1, 5)"],
["Green Bay Packers", "Date(2010, 8, 5)", "Date(2011, 1, 5)"],
["New York Giants", "Date(2011, 8, 5)", "Date(2012, 1, 5)"],
["Baltimore Ravens", "Date(2012, 8, 5)", "Date(2013, 1, 5)"],
["Seattle Seahawks", "Date(2013, 8, 5)", "Date(2014, 1, 5)"]
]);
کار با Timeofday
نوع داده ستون DataTable timeofday آرایه ای از 3 یا 4 عدد می گیرد که به ترتیب نشان دهنده ساعت، دقیقه، ثانیه و به صورت اختیاری میلی ثانیه است. استفاده از timeofday با استفاده از date و datetime متفاوت است، زیرا مقادیر مختص یک تاریخ نیستند، در حالی که date و datetime همیشه یک تاریخ را مشخص می کنند.
به عنوان مثال، زمان 8:30 صبح خواهد بود: [8, 30, 0, 0] ، با مقدار 4 اختیاری است ( [8, 30, 0] همان مقدار زمان روز را تولید می کند).
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
[[8, 30, 45], 5],
[[9, 0, 0], 10],
[[10, 0, 0, 0], 12],
[[10, 45, 0, 0], 13],
[[11, 0, 0, 0], 15],
[[12, 15, 45, 0], 20],
[[13, 0, 0, 0], 22],
[[14, 30, 0, 0], 25],
[[15, 12, 0, 0], 30],
[[16, 45, 0], 32],
[[16, 59, 0], 42]
]);
var options = {
title: 'Total Emails Received Throughout the Day',
height: 450
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
قالب‌بندی برچسب‌های محور، خط شبکه و تیک
هنگام کار با تاریخ‌ها، زمان تاریخ و زمان روز، ممکن است بخواهید برچسب‌های محور، برچسب‌های خط مشبک یا برچسب‌ها را به روش خاصی قالب‌بندی کنید. این را می توان از چند طریق به دست آورد.
ابتدا می توانید از گزینه hAxis.format یا vAxis.format استفاده کنید. این گزینه زمانی اعمال می شود که گزینه gridlines.count حذف شده باشد، در این صورت نمودار به طور پیش فرض تعداد 5 را دارد و همچنین زمانی که روی عددی غیر از -1 تنظیم می شود. این به شما امکان می دهد یک رشته قالب را مشخص کنید، جایی که از حروف نگهدارنده برای قسمت های مختلف تاریخ/تاریخ/زمان روز خود استفاده می کنید. برای اطلاعات بیشتر در مورد مکان‌گردان‌ها و نحوه کارکرد آنها، به مرجع شکل‌دهنده تاریخ ، به‌ویژه بخش pattern را ببینید.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addRows([
[new Date(2015, 0, 1), 5], [new Date(2015, 0, 2), 7], [new Date(2015, 0, 3), 3],
[new Date(2015, 0, 4), 1], [new Date(2015, 0, 5), 3], [new Date(2015, 0, 6), 4],
[new Date(2015, 0, 7), 3], [new Date(2015, 0, 8), 4], [new Date(2015, 0, 9), 2],
[new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
[new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
[new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
[new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
[new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
[new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
[new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
[new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7], [new Date(2015, 1, 2), 9]
]);
var options = {
title: 'Rate the Day on a Scale of 1 to 10',
width: 900,
height: 500,
hAxis: {
format: 'M/d/yy',
gridlines: {count: 15}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'MMM dd, yyyy' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
}
همچنین می‌توانید قوانین قالب‌بندی را برای واحدهای خاصی از مقادیر تاریخ و زمان با گنجاندن گزینه units در زیر gridlines و minorGridlines برای هر دو محور ارائه کنید. این گزینه تنها در صورتی استفاده خواهد شد که گزینه gridlines.count روی -1 تنظیم شده باشد.
گزینه gridlines.units یک شی است که در آن قالب را برای جنبه‌های مختلف تاریخ/تاریخ/زمان روز برای خط شبکه محاسبه‌شده مشخص می‌کنید و نمودار شما خطوط شبکه را بر اساس قالب اول محاسبه می‌کند که با فضای برچسب خط شبکه مطابقت دارد. می توانید فرمت ها را برای سال ها، ماه ها، روزها، ساعت ها، دقیقه ها، ثانیه ها و میلی ثانیه ها تنظیم کنید.
گزینه format آرایه‌ای از قالب‌های رشته‌ای را می‌پذیرد و تا زمانی که قالبی متناسب با ناحیه برچسب باشد از آنها به ترتیب استفاده می‌کند. به همین دلیل توصیه می شود فرمت ها را به ترتیب از طولانی ترین به کوتاه ترین فهرست بندی کنید. قالب‌های رشته‌ای از الگوهای مشابه مرجع قالب‌کننده تاریخ که قبلاً ذکر شد استفاده می‌کنند.
توجه داشته باشید که در نمودار بالا هنگام تغییر پنجره نمایش، فرمت واحد hours تغییر می کند، با توجه به اینکه ساعت ها از خطوط شبکه جزئی به خطوط اصلی تغییر می کند و قالب گزینه ها با آنها تغییر می کند. همچنین، توجه داشته باشید که minorGridlines از فرمت‌های دوم و کوتاه‌تر استفاده می‌کند، زیرا فرمت‌های اول با فضای هر نمونه مناسب نیستند.
hAxis: {
viewWindow: {
min: new Date(2014, 11, 31, 18),
max: new Date(2015, 0, 3, 1)
},
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
}
اطلاعات بیشتر در مورد تاریخ های جاوا اسکریپت
اگر می‌خواهید درباره شی جاوا اسکریپت Date() اطلاعات بیشتری کسب کنید، شبکه توسعه‌دهنده موزیلا یک منبع عالی است. در آنجا می توانید همه چیز را در مورد اشیاء تاریخ جاوا اسکریپت بیاموزید.