نظرة عامة
ملاحظة: تحتسب JavaScript الأشهر التي تبدأ من صفر: تشير قيمة شهر كانون الثاني (يناير) إلى 0 و1 شباط (فبراير) و11 كانون الأول (ديسمبر). إذا كان مخطط التقويم يبدو بعيدًا لمدة شهر، فهذا هو السبب.
الرسم البياني للتقويم هو رسم بياني يتم استخدامه لإظهار النشاط على مدار فترة زمنية طويلة، مثل الأشهر أو السنوات. ويُنصح باستخدامها على أفضل نحو عندما تريد توضيح كيف تختلف الكمية استنادًا إلى اليوم من الأسبوع أو مدى مؤشراتها بمرور الوقت.
قد يخضع مخطط التقويم لمراجعات كبيرة في إصدارات مخططات Google المستقبلية.
يتم عرض الرسوم البيانية في "تقويم Google" في المتصفّح باستخدام SVG أو VML، أيهما يكون مناسبًا لمتصفِّح المستخدم. مثل جميع الرسوم البيانية في Google، تعرض الرسوم البيانية في التقويم تلميحات عندما يمرِّر المستخدم مؤشر الماوس فوق البيانات. يعود السبب في ذلك إلى أهمية الرسم البياني لتقويم 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-Roman وعريض غامق، ونضبط المخططات على اللون نفسه، ونضعه في مساحة متروكة بحجم 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-Roman وخط مائل بشكل غامق، ونضيف عشر وحدات بكسل بين تصنيفات السنة وأسفل الرسم البياني:
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 (اختياري) | |
---|---|---|---|---|
الغرض: | التواريخ | القيم | ... | الأدوار الاختيارية |
نوع البيانات: | التاريخ أو التاريخ أو الوقت أو الوقت | الرقم | ... | |
الدور: | نطاق | البيانات | ... | |
أدوار الأعمدة الاختيارية: | بدون قفل |
بدون قفل |
... |
خيارات الضبط
الاسم | |
---|---|
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. } } }; Type: كائن
تلقائي:
{ 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 } } }; Type: كائن
تلقائي:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.dayOfWeekRightSpace |
تمثّل هذه السمة المسافة بين الحافة اليمنى لتصنيفات الأسبوع والحافة اليسرى لمربّعات اليوم على الرسم البياني. النوع: عدد صحيح
تلقائي: 4
|
calendar.daysOfWeek |
التصنيفات المكوَّنة من حرف واحد والتي يتم استخدامها من يوم الأحد إلى السبت. النوع: سلسلة
تلقائي:
'SMTWTFS' |
calendar.focusedCellColor |
عندما يركز المستخدم (على سبيل المثال، بالتمرير) فوق مربع يوم، ستُبرز الرسوم البيانية في التقويم هذا المربع. var options = { calendar: focusedCellColor: { stroke: 'red', strokeOpacity: 0.8, strokeWidth: 3 } } }; Type: كائن
تلقائي:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
calendar.monthLabel |
نمط لتصنيفات الأشهر، على سبيل المثال: var options = { calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 16, color: 'green', bold: true, italic: false } } }; Type: كائن
تلقائي:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.monthOutlineColor |
يتم تحديد الأشهر التي تحتوي على قيم بيانات من الآخرين باستخدام حد في هذا النمط. var options = { calendar: { monthOutlineColor: { stroke: 'blue', strokeOpacity: 0.8, strokeWidth: 2 } } };(اطّلِع أيضًا على calendar.unusedMonthOutlineColor .)
Type: كائن
تلقائي:
{ 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 .)
Type: كائن
تلقائي:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
colorAxis |
كائن يحدد عملية ربط بين قيم عمود الألوان والألوان أو مقياس تدرج لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضّح هنا: {minValue: 0, colors: ['#FF0000', '#00FF00']} Type: كائن
الإعداد التلقائي: قيمة خالية
|
colorAxis.colors |
الألوان المراد تعيينها للقيم في التصور. تمثّل هذه السمة مصفوفة من السلاسل يكون فيها كل عنصر عبارة عن سلسلة لون HTML، على سبيل المثال: النوع: مصفوفة من سلاسل الألوان
الإعداد التلقائي: قيمة خالية
|
colorAxis.maxValue |
في حال توفّرها، يتم تحديد حد أقصى لقيمة بيانات ألوان الرسم البياني. سيتم عرض قيَم بيانات الألوان لهذه القيمة والقيم الأعلى كآخر لون في نطاق النوع: رقم
تلقائي: الحد الأقصى لقيمة عمود اللون في بيانات الرسم البياني
|
colorAxis.minValue |
في حال توفّرها، يتم تحديد حد أدنى لقيمة بيانات ألوان الرسم البياني. سيتم عرض قيم بيانات الألوان لهذه القيمة والأقل كأول لون في نطاق النوع: رقم
تلقائي: الحد الأدنى لقيمة عمود اللون في بيانات الرسم البياني
|
colorAxis.values |
وفي حال توفّرها، تتحكّم هذه السياسة في كيفية ارتباط القيم بالألوان. ترتبط كل قيمة باللون
المقابل في مصفوفة النوع: مصفوفة من الأرقام
الإعداد التلقائي: قيمة خالية
|
forceIFrame |
لرسم الرسم البياني داخل إطار مضمّن. (يُرجى ملاحظة أنّه في IE8، يتم تجاهل هذا الخيار، ويتم رسم كل مخططات IE8 بالإطارات i-frames). النوع: قيمة منطقية
الإعداد التلقائي: خطأ
|
الطول |
تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل. النوع: رقم
التلقائي: ارتفاع العنصر الذي يحتوي على الصورة
|
noDataPattern |
تستخدم الرسوم البيانية في "تقويم Google" نمطًا قطريًا مخططًا للإشارة إلى عدم وجود بيانات
ليوم محدَّد. استخدِم الخيارَين noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } Type: كائن
الإعداد التلقائي: قيمة خالية
|
tooltip.isHtml |
يجب ضبط القيمة على ملاحظة: إنّ تخصيص محتوى تلميح HTML من خلال دور بيانات عمود تلميح غير متاح في التمثيلات البصرية للرسم البياني الدائري والرسم البياني الفقاعي. النوع: قيمة منطقية
القيمة التلقائية:صحيح
|
العرض |
عرض الرسم البياني بالبكسل النوع: رقم
الإعداد التلقائي: عرض العنصر المتضمّن
|
الطُرق
الطريقة | |
---|---|
draw(data, options) |
لرسم الرسم البياني. لا يقبل الرسم البياني طلبات الطُرق الإضافية إلا بعد تنشيط حدث نوع الإرجاع: لا شيء
|
getBoundingBox(id) |
تعرض كائنًا يحتوي على يسار عنصر الرسم البياني
ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم الرسم البياني. نوع الإرجاع: عنصر
|
getSelection() |
تعرض صفيفًا من الكيانات المحددة في الرسم البياني.
الكيانات القابلة للاختيار هي أشرطة وإدخالات وسائل الإيضاح والفئات.
يتجاوب الشريط مع خلية في جدول البيانات وإدخال وسيلة إيضاح في عمود (فهرس الصف فارغ) وفئة في صف (فهرس العمود فارغ).
بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في أي وقت محدّد.
نوع الإرجاع: مصفوفة من عناصر الاختيار
|
setSelection() |
لاختيار العناصر المحددة في الرسم البياني يؤدي هذا الإجراء إلى إلغاء أي اختيار سابق.
الكيانات القابلة للاختيار هي أشرطة وإدخالات وسائل الإيضاح والفئات.
يتجاوب الشريط مع خلية في جدول البيانات وإدخال وسيلة إيضاح في عمود (فهرس الصف فارغ) وفئة في صف (فهرس العمود فارغ).
بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في كل مرة.
نوع الإرجاع: لا شيء
|
clearChart() |
يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له. نوع الإرجاع: لا شيء
|
الأحداث
الاسم | |
---|---|
error |
يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني. الخصائص: المعرّف والرسالة
|
onmouseover |
يتم الإطلاق عندما يمرر المستخدم الماوس فوق كيان مرئي. يمرّر فهرس الصف وقيمة تاريخ العنصر. إذا لم يكن هناك عنصر جدول بيانات للعنصر، ستكون القيمة المعروضة لفهرس
الصف هي المواقع: الصف والتاريخ
|
onmouseout |
يتم إطلاقها عندما يوجِّه المستخدم الماوس بعيدًا عن كيان مرئي. ينقل فهرس الصف وقيمة التاريخ الخاصة بالعنصر. إذا لم يكن هناك عنصر جدول بيانات للعنصر، ستكون القيمة المعروضة
لفهرس الصف هي صف المواقع، التاريخ
|
ready |
الرسم البياني جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني
وطرق الاتصال بعد رسمه، عليك إعداد أداة معالجة لهذا الحدث قبل
استدعاء طريقة الخصائص: غير محدّدة
|
select |
يتم الإطلاق عندما ينقر المستخدم على عنصر مرئي. لمعرفة ما تم اختياره، يمكنك الاتصال بالرقم
الخصائص: غير محدّدة
|
سياسة البيانات
تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.