نظرة عامة
ملاحظة: تحتسب JavaScript JavaScript أشهرًا بدءًا من صفر: كانون الثاني (يناير) هو 0، و1 شباط (فبراير)، و11 كانون الأول (ديسمبر). في حال عدم ظهور الرسم البياني في تقويمك لمدة شهر، هذا هو السبب في ذلك.
الرسم البياني للتقويم هو تمثيل بصري يُستخدَم لعرض النشاط على مدار فترة زمنية طويلة، مثل الأشهر أو السنوات. ويُفضّل استخدامها عندما تريد توضيح كيفية تغيّر الكمية اعتمادًا على اليوم من الأسبوع أو على مدى رواجها بمرور الوقت.
قد يخضع الرسم البياني للتقويم إلى مراجعات مهمّة في الإصدارات المستقبلية من "قوائم الأغاني الرائجة على Google".
ويتم عرض الرسوم البيانية للتقويم في المتصفِّح باستخدام SVG أو VML، حسبما يناسب متصفّح المستخدم. كما هو الحال في جميع الرسوم البيانية في Google، تعرض الرسوم البيانية للتقويم تلميحات عندما يمرِّر المستخدم مؤشر الماوس فوق البيانات. وتكون هذه القيمة مرتبطة بالرصيد المستحق: كان الرسم البياني للتقويم مستوحى من العرض المرئي للتقويم في D3.
مثال بسيط
لنفترض أننا أردنا عرض مدى تنوع حضور فريق رياضي على مدار الموسم. باستخدام رسم بياني للتقويم، يمكننا استخدام السطوع للإشارة إلى القيم والسماح للمستخدمين بالاطّلاع على المؤشرات بنظرة سريعة:
يمكنك تحريك مؤشر الماوس فوق الأيام الفردية لمشاهدة قيم البيانات الأساسية.
لإنشاء رسم بياني للتقويم، حمِّل حزمة calendar
ثم أنشِئ عمودين،
أحدهما للتواريخ والآخر للقيم. (يتوفر عمود ثالث اختياري للأنماط المخصصة
في إصدار مستقبلي من مخططات Google.)
ثم املأ الصفوف بأزواج القيمة والتاريخ كما هو موضح أدناه.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["calendar"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'date', id: 'Date' }); dataTable.addColumn({ type: 'number', id: 'Won/Loss' }); dataTable.addRows([ [ new Date(2012, 3, 13), 37032 ], [ new Date(2012, 3, 14), 38024 ], [ new Date(2012, 3, 15), 38024 ], [ new Date(2012, 3, 16), 38108 ], [ new Date(2012, 3, 17), 38229 ], // Many rows omitted for brevity. [ new Date(2013, 9, 4), 38177 ], [ new Date(2013, 9, 5), 38705 ], [ new Date(2013, 9, 12), 38210 ], [ new Date(2013, 9, 13), 38029 ], [ new Date(2013, 9, 19), 38823 ], [ new Date(2013, 9, 23), 38345 ], [ new Date(2013, 9, 24), 38436 ], [ new Date(2013, 9, 30), 38447 ] ]); var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); var options = { title: "Red Sox Attendance", height: 350, }; chart.draw(dataTable, options); } </script> </head> <body> <div id="calendar_basic" style="width: 1000px; height: 350px;"></div> </body> </html>
الأيام
يمثل كل مربع في مخطط تقويم يومًا واحدًا. لا يمكن حاليًا تخصيص لون خلايا البيانات، علمًا بأنّ ذلك سيتغيّر في الإصدار التالي من "قوائم الأغاني الرائجة على Google".
إذا كانت كل قيّم البيانات موجبة، ستتراوح الألوان من الأبيض إلى الأزرق مع الإشارة إلى درجات الأزرق الأكثر عمقًا في أعلى القيم. وإذا كانت هناك قيم بيانات سلبية، ستظهر باللون البرتقالي، كما هو موضّح أدناه.
يتشابه رمز هذا التقويم مع التقويم الأول، باستثناء أن الصفوف تبدو كما يلي:
[ new Date(2013, 9, 4), 10 ], [ new Date(2013, 9, 5), 3 ], [ new Date(2013, 9, 7), -1 ], [ new Date(2013, 9, 8), 2 ], [ new Date(2013, 9, 12), -1 ], [ new Date(2013, 9, 13), 1 ], [ new Date(2013, 9, 15), 1 ], [ new Date(2013, 9, 16), -4 ],
يمكنك تغيير حجم الأيام ("الخلايا") باستخدام الخيار calendar.cellSize
:
في هذا الحقل، غيّرنا calendar.cellSize
إلى 10، لتقلّص عدد الأيام، وبالتالي الرسم البياني ككل.
var options = { title: 'Red Sox Attendance', calendar: { cellSize: 10 }, };
يمكن تخصيص الأيام التي لا تحتوي على قيم بيانات باستخدام الخيار noDataPattern
:
تم ضبط color
على اللون الأزرق الفاتح وbackgroundColor
على درجة داكنة قليلاً:
var options = { title: "Red Sox Attendance", height: 350, noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } };
يمكنك التحكم في لون حد الخلية وعرض الحدود والتعتيم باستخدام
calendar.cellColor
:
يجب توخي الحذر عند اختيار لون الشطب والذي سيتم تمييزه عن
monthOutlineColor
أو اختيار درجة تعتيم منخفضة. في ما يلي خيارات الرسم البياني أعلاه:
var options = { title: 'Red Sox Attendance', height: 350, calendar: { cellColor: { stroke: '#76a7fa', strokeOpacity: 0.5, strokeWidth: 1, } } };
في حال التركيز على يوم في الرسم البياني أعلاه، سيتم تمييز الحد باللون الأحمر. ويمكنك التحكّم في هذا السلوك باستخدام خيارات calendar.focusedCellColor
:
var options = { title: 'Red Sox Attendance', height: 350, calendar: { focusedCellColor: { stroke: '#d3362d', strokeOpacity: 1, strokeWidth: 1, } } };
الأسابيع
بشكل افتراضي، يتم تصنيف أيام الأسبوع بالأحرف الأولى من يوم الأحد وحتى السبت.
لا يمكنك تغيير ترتيب الأيام، ولكن يمكنك تغيير الأحرف المستخدمة مع خيار calendar.daysOfWeek
. يمكنك أيضًا التحكّم في المساحة المتروكة بين أيام الأسبوع والرسم البياني من خلال calendar.dayOfWeekRightSpace
، ويمكنك تخصيص نمط النص باستخدام calendar.dayOfWeekLabel
:
ونغيّر خط تصنيفات الأسبوع، ونضع مساحة بحجم 10 بكسل بين التصنيفات وبيانات الرسم البياني، ونبدأ أسابيع الأسبوع من الإثنين.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#1a8763', bold: true, italic: true, }, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS', } };
الأشهر
ويتم تحديد الأشهر تلقائيًا من خلال خطوط رمادية داكنة. يمكنك استخدام
الخيار calendar.monthOutlineColor
للتحكّم في الحدود،
وcalendar.monthLabel
لتخصيص خط التصنيف،
وcalendar.underMonthSpace
لضبط مساحة تعبئة التصنيف:
ويتم تعيين خط التسمية على خط مائل غامق باللون الأحمر الغامق بطول 12 نقطة في Times Times-رومان، كما يتم ضبط المخطط على اللون نفسه ووضعه في مساحة متروكة مقدارها 16 بكسل. ويتم ضبط مخططات الشهر غير المستخدمة على لون باهت اللون نفسه.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#981b48', bold: true, italic: true }, monthOutlineColor: { stroke: '#981b48', strokeOpacity: 0.8, strokeWidth: 2 }, unusedMonthOutlineColor: { stroke: '#bc5679', strokeOpacity: 0.8, strokeWidth: 1 }, underMonthSpace: 16, } };
السنة
تظهر دائمًا السنوات الواردة في الرسوم البيانية في الحافة اليمنى من الرسم البياني، ويمكن تخصيصها باستخدام calendar.yearLabel
وcalendar.underYearSpace
:
ونضبط خط العام على خط مائل غامق باللون الأخضر الغامق بطول 32 نقطة Times-Roma، ونضيف عشر وحدات بكسل بين تصنيفات السنة وأسفل الرسم البياني:
var options = { title: 'Red Sox Attendance', height: 350, calendar: { underYearSpace: 10, // Bottom padding for the year labels. yearLabel: { fontName: 'Times-Roman', fontSize: 32, color: '#1A8763', bold: true, italic: true } } };
جارٍ التحميل
اسم الحزمة google.charts.load
هو "calendar"
:
google.charts.load("current", {packages: ["calendar"]});
اسم فئة التمثيل البصري هو google.visualization.Calendar
:
var visualization = new google.visualization.Calendar(container);
تنسيق البيانات
الصفوف: يمثل كل صف في الجدول تاريخًا.
الأعمدة:
العمود 0 | العمود 1 | ... | العمود N (اختياري) | |
---|---|---|---|---|
الغرض: | التواريخ | القيم | ... | الأدوار الاختيارية |
نوع البيانات: | date, datetime, or timeofday | number | ... | |
الدور: | نطاق | البيانات | ... | |
أدوار الأعمدة الاختيارية: | بدون قفل |
بدون قفل |
... |
خيارات الضبط
الاسم | |
---|---|
calendar.cellColor |
يتيح لك الخيار var options = { calendar: { cellColor: { stroke: 'red', // Color the border of the squares. strokeOpacity: 0.5, // Make the borders half transparent. strokeWidth: 2 // ...and two pixels thick. } } }; النوع: الكائن
تلقائي:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
calendar.cellSize |
حجم مربعات يوم التقويم: var options = { calendar: { cellSize: 10 } }; النوع: عدد صحيح
تلقائي: 16
|
calendar.dayOfWeekLabel |
تتحكّم هذه السياسة في نمط خط تصنيفات الأسبوع في أعلى الرسم البياني: var options = { calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: 'black', bold: false, italic: false } } }; النوع: الكائن
تلقائي:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.dayOfWeekRightSpace |
المسافة بين الحافة اليمنى لتصنيفات الأسبوع والحافة اليسرى لمربّعات يوم الرسم البياني. النوع: عدد صحيح
تلقائي: 4
|
calendar.daysOfWeek |
التصنيفات المكونة من حرف واحد للاستخدام من الأحد إلى السبت. النوع: سلسلة
تلقائي:
'SMTWTFS' |
calendar.مع التركيز على الخلية |
عندما يركّز المستخدم (مثلاً، من خلال تمرير مؤشر الماوس) على مربّع يوم واحد، ستُبرز الرسوم البيانية في التقويم المربّع. var options = { calendar: focusedCellColor: { stroke: 'red', strokeOpacity: 0.8, strokeWidth: 3 } } }; النوع: الكائن
تلقائي:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
calendar.monthLabel |
نمط لتسميات الشهر، على سبيل المثال: var options = { calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 16, color: 'green', bold: true, italic: false } } }; النوع: الكائن
تلقائي:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.monthOutlineColor |
ويتم تحديد الأشهر التي تحتوي على قيم بيانات من خلال الآخرين باستخدام حد بهذا النمط. var options = { calendar: { monthOutlineColor: { stroke: 'blue', strokeOpacity: 0.8, strokeWidth: 2 } } };(يُرجى الاطّلاع أيضًا على calendar.unusedMonthOutlineColor .)
النوع: الكائن
تلقائي:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
calendar.underMonthSpace |
عدد وحدات البكسل بين تسميات نهاية الشهر ومربعات أعلى اليوم: var options = { calendar: { underMonthSpace: 12 } }; النوع: عدد صحيح
تلقائي: 6
|
calendar.underYearSpace |
عدد وحدات البكسل بين تصنيف العام السفلي والجزء السفلي من المخطط: var options = { calendar: { underYearSpace: 2 } }; النوع: عدد صحيح
القيمة التلقائية: 0
|
calendar.unusedMonthOutlineColor |
ويتم تحديد الأشهر بدون قيم البيانات من الآخرين باستخدام حد بهذا النمط. var options = { calendar: { unusedMonthOutlineColor: { stroke: 'yellow', strokeOpacity: 0.8, strokeWidth: 2 } } };(يُرجى الاطّلاع أيضًا على calendar.monthOutlineColor .)
النوع: الكائن
تلقائي:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
محور الألوان |
كائن يحدد تعيينًا بين قيم أعمدة الألوان وألوانها أو مقياس تدرّج. لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضح هنا: {minValue: 0, colors: ['#FF0000', '#00FF00']} النوع: الكائن
تلقائي: null
|
colorAxis.colors |
ألوان لتعيين القيم في التمثيل البصري. مصفوفة من السلاسل، حيث يكون كل عنصر عبارة عن سلسلة لون HTML، على سبيل المثال: النوع: مصفوفة سلاسل الألوان
تلقائي: null
|
colorAxis.maxValue |
في حال توفّر هذه السمة، تحدِّد قيمة قصوى لبيانات لون الرسم البياني. سيتم عرض قيم بيانات اللون لهذه القيمة
والمستويات الأعلى كآخر لون في نطاق النوع: الرقم
تلقائي: الحد الأقصى لقيمة عمود اللون في بيانات الرسم البياني
|
colorAxis.minValue |
في حال توفّر هذه السمة، تحدِّد الحد الأدنى لقيمة بيانات لون الرسم البياني. سيتم عرض قيم بيانات اللون لهذه القيمة
والأقل كأول لون في النطاق النوع: الرقم
تلقائي: الحد الأدنى لقيمة عمود اللون في بيانات الرسم البياني
|
قيم Axis.color |
تتحكّم هذه السياسة في كيفية ارتباط القيم بالألوان في حال توفّرها. ترتبط كل قيمة باللون المقابل في المصفوفة النوع: مصفوفة أرقام
تلقائي: null
|
فرض إطار |
لرسم المخطط داخل إطار مضمن. (تجدر الإشارة إلى أنه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية لـ IE8 في إطارات i.) النوع: منطقي
تلقائي: خطأ
|
الارتفاع |
ارتفاع المخطط بالبكسل. النوع: الرقم
افتراضي: ارتفاع العنصر المضمن
|
noDataPattern |
تستخدم الرسوم البيانية للتقويم نمطًا قطريًا مخططًا للإشارة إلى عدم توفّر بيانات
خاصة بيوم معيّن. استخدِم الخيارَين noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } النوع: الكائن
تلقائي: null
|
tooltip.isHtml |
اضبط السمة على ملاحظة: لا يتوفّر تخصيص محتوى تلميح HTML عبر دور بيانات عمود تلميحات الأدوات في الرسم البياني الدائري والرسم البياني الفقاعي. النوع: منطقي
افتراضي: صحيح
|
width |
عرض المخطط بالبكسل. النوع: الرقم
افتراضي: عرض العنصر المضمن
|
الطرق
الطريقة | |
---|---|
draw(data, options) |
لرسم المخطط. لا يقبل الرسم البياني أي طلبات أخرى للحصول على طريقة إلا بعد إطلاق فعالية نوع الإرجاع: لا شيء
|
getBoundingBox(id) |
لعرض كائن يحتوي على عنصر الرسم البياني الأيمن والأيسر والعرض والارتفاع
ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: كائن
|
getSelection() |
لعرض صفيف من كيانات المخطط المحددة.
الكيانات القابلة للتحديد هي أشرطة وإدخالات تسمية توضيحية وفئات.
يتطابق شريط مع خلية في جدول البيانات، وإدخال تسمية توضيحية إلى عمود (فهرس الصفوف فارغ)،
وفئة لصف (فهرس العمود فارغ).
بالنسبة إلى هذا الرسم البياني، لا يمكن اختيار سوى كيان واحد في أي لحظة.
نوع العرض: مصفوفة من عناصر التحديد
|
setSelection() |
لاختيار كيانات الرسم البياني المحددة. لإلغاء أي اختيار سابق.
الكيانات القابلة للتحديد هي أشرطة وإدخالات تسمية توضيحية وفئات.
يتطابق شريط مع خلية في جدول البيانات، وإدخال تسمية توضيحية إلى عمود (فهرس الصفوف فارغ)،
وفئة لصف (فهرس العمود فارغ).
بالنسبة إلى هذا الرسم البياني، لا يمكن اختيار سوى كيان واحد في كل مرة.
نوع الإرجاع: لا شيء
|
clearChart() |
محو الرسم البياني وإصدار جميع الموارد المخصّصة له نوع الإرجاع: لا شيء
|
الأحداث
الاسم | |
---|---|
error |
يتم الإطلاق عند حدوث خطأ عند محاولة عرض الرسم البياني. الخصائص: رقم التعريف، الرسالة
|
onmouseover |
يتم الإطلاق عندما يمرر المستخدم الماوس فوق وحدة مرئية. لإرجاع فهرس الصف وقيمة التاريخ
للكيان. إذا لم يكن هناك عنصر جدول بيانات للكيان، تكون القيمة المعروضة لفهرس الصف هي الخصائص: الصف، التاريخ
|
onmouseout |
يتم الإطلاق عندما يمرر المستخدم بعيدًا عن وحدة مرئية. لإرجاع فهرس الصف وقيمة التاريخ
للكيان. إذا لم يكن هناك عنصر جدول بيانات للكيان، تكون القيمة المعروضة لفهرس الصفوف هي صف الخصائص، التاريخ
|
ready |
المخطط جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد مستمع لهذا الحدث قبل طلب طريقة الخصائص: بلا
|
select |
يتم الإطلاق عندما ينقر المستخدم على كيان مرئي. للاطّلاع على ما تم اختياره، يمكنك الاتصال
الخصائص: بلا
|
سياسة البيانات
تتم معالجة جميع الرموز والبيانات وعرضها في المتصفح. ولا يتم إرسال أي بيانات إلى أي خادم.