رسم بياني للتقويم

  1. Overview
  2. مثال بسيط
  3. الأيام
  4. الأسابيع
  5. الشهور
  6. سنوات
  7. جارٍ التحميل
  8. تنسيق البيانات
  9. خيارات الإعداد
  10. الطُرق
  11. الأحداث
  12. سياسة البيانات

نظرة عامة

ملاحظة: تحتسب 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

يتيح لك الخيار 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: {colors:['red','#004411']}. يجب أن يكون لديك قيمتان على الأقل. سيشمل التدرج جميع القيم، بالإضافة إلى القيم الوسيطة المحسوبة، مع إدراج اللون الأول كأصغر قيمة واللون الأخير كأعلى قيمة.

النوع: مصفوفة من سلاسل الألوان
الإعداد التلقائي: قيمة خالية
colorAxis.maxValue

في حال توفّرها، يتم تحديد حد أقصى لقيمة بيانات ألوان الرسم البياني. سيتم عرض قيَم بيانات الألوان لهذه القيمة والقيم الأعلى كآخر لون في نطاق colorAxis.colors.

النوع: رقم
تلقائي: الحد الأقصى لقيمة عمود اللون في بيانات الرسم البياني
colorAxis.minValue

في حال توفّرها، يتم تحديد حد أدنى لقيمة بيانات ألوان الرسم البياني. سيتم عرض قيم بيانات الألوان لهذه القيمة والأقل كأول لون في نطاق colorAxis.colors.

النوع: رقم
تلقائي: الحد الأدنى لقيمة عمود اللون في بيانات الرسم البياني
colorAxis.values

وفي حال توفّرها، تتحكّم هذه السياسة في كيفية ارتباط القيم بالألوان. ترتبط كل قيمة باللون المقابل في مصفوفة colorAxis.colors. تنطبق هذه القيم على بيانات ألوان الرسم البياني. يتم التلوين بناءً على تدرج القيم المحددة هنا. إنّ عدم تحديد قيمة لهذا الخيار يساوي تحديد [minValue, maxValue].

النوع: مصفوفة من الأرقام
الإعداد التلقائي: قيمة خالية
forceIFrame

لرسم الرسم البياني داخل إطار مضمّن. (يُرجى ملاحظة أنّه في IE8، يتم تجاهل هذا الخيار، ويتم رسم كل مخططات IE8 بالإطارات i-frames).

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
الطول

تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل.

النوع: رقم
التلقائي: ارتفاع العنصر الذي يحتوي على الصورة
noDataPattern

تستخدم الرسوم البيانية في "تقويم Google" نمطًا قطريًا مخططًا للإشارة إلى عدم وجود بيانات ليوم محدَّد. استخدِم الخيارَين noDataPattern.backgroundColor وnoDataPattern.color لإلغاء الإعدادات التلقائية للتدرّج الرمادي، على سبيل المثال: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Type: كائن
الإعداد التلقائي: قيمة خالية
tooltip.isHtml

يجب ضبط القيمة على false لاستخدام تلميحات الأدوات المعروضة بتنسيق SVG (بدلاً من العرض بتنسيق HTML). راجِع تخصيص محتوى التلميح لمزيد من التفاصيل.

ملاحظة: إنّ تخصيص محتوى تلميح HTML من خلال دور بيانات عمود تلميح غير متاح في التمثيلات البصرية للرسم البياني الدائري والرسم البياني الفقاعي.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
العرض

عرض الرسم البياني بالبكسل

النوع: رقم
الإعداد التلقائي: عرض العنصر المتضمّن

الطُرق

الطريقة
draw(data, options)

لرسم الرسم البياني. لا يقبل الرسم البياني طلبات الطُرق الإضافية إلا بعد تنشيط حدث ready. Extended description.

نوع الإرجاع: لا شيء
getBoundingBox(id)

تعرض كائنًا يحتوي على يسار عنصر الرسم البياني id وأعلاه وعرضه وارتفاعه. لم يتم توثيق تنسيق id بعد (هذه هي القيم التي تعرضها معالِجات الأحداث)، ولكن إليك بعض الأمثلة:

var cli = chart.getChartLayoutInterface();

ارتفاع مساحة الرسم البياني
cli.getBoundingBox('chartarea').height
عرض الشريط الثالث في السلسلة الأولى من رسم بياني شريطي أو عمودي
cli.getBoundingBox('bar#0#2').width
مربع ربط الإسفين الخامس لمخطط دائري
cli.getBoundingBox('slice#4')
مربع ربط بيانات المخطط العمودي (على سبيل المثال، عمودي):
cli.getBoundingBox('vAxis#0#gridline')
مربع ربط بيانات المخطط لمخطط أفقي (على سبيل المثال، شريطي):
cli.getBoundingBox('hAxis#0#gridline')

ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم الرسم البياني.

نوع الإرجاع: عنصر
getSelection()

تعرض صفيفًا من الكيانات المحددة في الرسم البياني. الكيانات القابلة للاختيار هي أشرطة وإدخالات وسائل الإيضاح والفئات. يتجاوب الشريط مع خلية في جدول البيانات وإدخال وسيلة إيضاح في عمود (فهرس الصف فارغ) وفئة في صف (فهرس العمود فارغ). بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في أي وقت محدّد. Extended description .

نوع الإرجاع: مصفوفة من عناصر الاختيار
setSelection()

لاختيار العناصر المحددة في الرسم البياني يؤدي هذا الإجراء إلى إلغاء أي اختيار سابق. الكيانات القابلة للاختيار هي أشرطة وإدخالات وسائل الإيضاح والفئات. يتجاوب الشريط مع خلية في جدول البيانات وإدخال وسيلة إيضاح في عمود (فهرس الصف فارغ) وفئة في صف (فهرس العمود فارغ). بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في كل مرة. Extended description .

نوع الإرجاع: لا شيء
clearChart()

يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له.

نوع الإرجاع: لا شيء

الأحداث

الاسم
error

يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني.

الخصائص: المعرّف والرسالة
onmouseover

يتم الإطلاق عندما يمرر المستخدم الماوس فوق كيان مرئي. يمرّر فهرس الصف وقيمة تاريخ العنصر. إذا لم يكن هناك عنصر جدول بيانات للعنصر، ستكون القيمة المعروضة لفهرس الصف هي undefined.

المواقع: الصف والتاريخ
onmouseout

يتم إطلاقها عندما يوجِّه المستخدم الماوس بعيدًا عن كيان مرئي. ينقل فهرس الصف وقيمة التاريخ الخاصة بالعنصر. إذا لم يكن هناك عنصر جدول بيانات للعنصر، ستكون القيمة المعروضة لفهرس الصف هي undefined.

صف المواقع، التاريخ
ready

الرسم البياني جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد أداة معالجة لهذا الحدث قبل استدعاء طريقة draw، وعدم الاتصال بها إلا بعد تنشيط الحدث.

الخصائص: غير محدّدة
select

يتم الإطلاق عندما ينقر المستخدم على عنصر مرئي. لمعرفة ما تم اختياره، يمكنك الاتصال بالرقم getSelection().

الخصائص: غير محدّدة

سياسة البيانات

تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.