رسم بياني لـ "تقويم Google"

نظرة عامة

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

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

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

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

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

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

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

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

النوع: مصفوفة أرقام
تلقائي: null
فرض إطار

لرسم المخطط داخل إطار مضمن. (تجدر الإشارة إلى أنه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية لـ IE8 في إطارات i.)

النوع: منطقي
تلقائي: خطأ
الارتفاع

ارتفاع المخطط بالبكسل.

النوع: الرقم
افتراضي: ارتفاع العنصر المضمن
noDataPattern

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

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
      
النوع: الكائن
تلقائي: null
tooltip.isHtml

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

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

النوع: منطقي
افتراضي: صحيح
width

عرض المخطط بالبكسل.

النوع: الرقم
افتراضي: عرض العنصر المضمن

الطرق

الطريقة
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().

الخصائص: بلا

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

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