نظرة عامة
جدول يمكن ترتيبه وتقسيمه إلى صفحات. يمكن تنسيق خلايا الجدول باستخدام سلاسل التنسيق، أو عن طريق إدراج HTML مباشرةً كقيم للخلايا. القيم الرقمية بمحاذاة إلى اليمين؛ ويتم عرض القيم المنطقية كعلامات اختيار. يمكن للمستخدمين اختيار صفوف فردية إما باستخدام لوحة المفاتيح أو الماوس. يمكن للمستخدمين ترتيب الصفوف من خلال النقر على رؤوس الأعمدة. يظل صف العنوان ثابتًا أثناء تمرير المستخدم. يُطلق الجدول عددًا من الأحداث المقابلة لتفاعل المستخدم.
مثال
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> </head> <body> <div id="table_div"></div> </body> </html>
جارٍ التحميل
اسم الحزمة google.charts.load
هو "table"
.
google.charts.load('current', {packages: ['table']});
اسم فئة التمثيل البصري هو google.visualization.Table
.
var visualization = new google.visualization.Table(container);
تنسيق البيانات
يتم تحويل جدول البيانات إلى جدول HTML مطابق، مع تحويل كل صف/عمود في جدول البيانات إلى صف/عمود في جدول HTML. يجب أن يكون كل عمود من نوع البيانات نفسه، كما يتم دعم جميع أنواع بيانات التمثيل البصري العادية (سلسلة نصية ومنطقية ورقم وما إلى ذلك).
الخصائص المخصّصة
يمكنك تخصيص الخصائص المخصّصة التالية لعناصر جدول البيانات، باستخدام طريقة setProperty()
في DataTable.
اسم الموقع | ينطبق على | الوصف |
---|---|---|
اسم الفئة | الخلية | اسم فئة سلسلة يمكن تعيينها إلى خلية فردية. استخدِم هذا الإعداد لتخصيص نمط CSS لخلايا فردية. |
style | الخلية | سلسلة نمط مطلوب تعيينها للخلية. سيؤدي هذا إلى إلغاء أنماط فئات CSS التي تم تطبيقها على تلك الخلية. يجب تعيين الخاصية allowHtml=true حتى تعمل هذه الميزة. مثال: 'border: 1px solid green;' |
مثال
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
خيارات الضبط
الاسم | |
---|---|
السماح باستخدام HTMLHtml |
إذا تم التعيين على "true"، فسيتم عرض القيم المنسقة للخلايا التي تتضمن علامات HTML كـ HTML. وإذا تم تعيينها على "false"، فلن تعمل معظم التنسيقات المخصصة بشكلٍ صحيح. النوع: منطقي
تلقائي: خطأ
|
تبديل الصف |
لتحديد ما إذا كان سيتم تعيين نمط اللون البديل إلى صفوف فردية أو زوجية. النوع: منطقي
افتراضي: صحيح
|
cssClassNames |
تمثل هذه الخاصية كائنًا يصف فيه كل اسم عنصر عنصر جدول، وتكون قيمة الخاصية سلسلة، مع تحديد فئة لتعيينها إلى عنصر الجدول هذا. استخدِم هذه الخاصية لتخصيص CSS مخصّصة لعناصر محدّدة في الجدول. لاستخدام هذه الخاصية، حدِّد كائنًا، حيث يحدد اسم الخاصية عنصر الجدول، وقيمة الخاصية عبارة عن سلسلة، مع تحديد اسم فئة لتعيينه لهذا العنصر. يجب عليك بعد ذلك تحديد نمط CSS لتلك الفئة على صفحتك. أسماء الخصائص التالية متوافقة:
مثال:
ملاحظة: في CSS، تلغي بعض العناصر العناصر الأخرى. على سبيل المثال، إذا حدّدت
لون خلفية للعنصر النوع: الكائن
تلقائي: null
|
رقم الصف الأول |
رقم الصف للصف الأول في جدول البيانات. يتم استخدامه فقط إذا كان showRowNumber صحيح. النوع: الرقم
تلقائي: 1
|
أعمدة مجمّدة |
عدد الأعمدة من اليسار التي سيتم تجميدها. ستظل هذه الأعمدة في مكانها عند تمرير الأعمدة المتبقية أفقيًا. إذا كانت قيمة النوع: الرقم
تلقائي: null
|
الارتفاع |
لتحديد ارتفاع عنصر حاوية التمثيل البصري. يمكنك استخدام وحدات HTML القياسية (على سبيل المثال، "100px" و"80em" و"60"). وفي حال عدم تحديد أي وحدات، يفترض أن يكون الرقم بكسل. وإذا لم يتم تحديد هذا الخيار، سيضبط المتصفّح الارتفاع تلقائيًا ليلائم الجدول، وسيتم تصغيره قدر الإمكان خلال هذه العملية. وإذا تم ضبط الارتفاع على أقل من الارتفاع المطلوب، سيضيف الجدول شريط تمرير رأسيًا (أي أنه يتم تجميد صف العنوان أيضًا). في حال الضبط على "100%"، سيتم توسيع الجدول قدر الإمكان في عنصر الحاوية. النوع: سلسلة
افتراضي: تلقائي
|
الصفحة |
في حالة وكيفية تمكين الترحيل عبر البيانات. اختر إحدى قيم السلسلة التالية:
النوع: سلسلة
تلقائي: "إيقاف"
|
حجم الصفحة |
عدد الصفوف في كل صفحة، عند تفعيل الترحيل مع خيار الصفحة. النوع: الرقم
تلقائي: 10
|
أزرار الترحيل |
لتعيين خيار محدد لأزرار الترحيل. وتكون الخيارات كما يلي:
النوع: سلسلة أو رقم
تلقائي: 'auto'
|
جدول rtl |
لإضافة توافق أساسي مع اللغات التي تُكتب من اليمين إلى اليسار (مثل العربية أو العبرية) من خلال عكس ترتيب الأعمدة في الجدول، بحيث يصبح العمود صفرًا في أقصى يسار العمود، ويظهر العمود الأخير في أقصى اليسار. ولا يؤثر ذلك في فهرس العمود في البيانات الأساسية، بل في ترتيب العرض فقط. لا يدعم التمثيل البصري للجدول عرض ثنائي الاتجاه (BiDi) الكامل حتى مع هذا الخيار. وسيتم تجاهل هذا الخيار في حال تفعيل الترحيل (باستخدام خيار الصفحة)، أو إذا كان الجدول يحتوي على أشرطة تمرير لأنك حدَّدت خيارات للارتفاع والعرض أصغر من حجم الجدول المطلوب. النوع: منطقي
تلقائي: خطأ
|
تمرير إلى موضع بداية اليسار |
يتم ضبط موضع التمرير الأفقي بالبكسل إذا كان الجدول يحتوي على أشرطة تمرير أفقية لأنك ضبطت خاصية العرض. سيتم فتح الجدول الذي تم تمريره وتجاوز العديد من وحدات البكسل العمود الموجود أقصى اليمين. النوع: الرقم
القيمة التلقائية: 0
|
إظهارصف الصف |
وفي حال ضبطها على "صحيح"، يتم عرض رقم الصف كأول عمود في الجدول. النوع: منطقي
تلقائي: خطأ
|
ترتيب |
في حالة وكيفية ترتيب الأعمدة عندما ينقر المستخدم على عنوان عمود. إذا كان الترتيب مفعّلاً، ننصحك بضبط السمتَين sortAscending وsortColumn أيضًا. اختَر إحدى قيم السلسلة التالية:
النوع: سلسلة
الافتراضي: "تمكين"
|
ترتيب تصاعدي |
الترتيب الذي يتم به ترتيب عمود الترتيب الأولي. صحيح للتصاعد، وخطأ للتنازل. يتم التجاهل إذا لم يتم تحديد النوع: منطقي
افتراضي: صحيح
|
تصنيف العمود |
فهرس عمود في جدول البيانات، والذي يتم ترتيب الجدول من خلاله. وسيتم تمييز العمود بسهم صغير يشير إلى ترتيب التصنيف. النوع: الرقم
تلقائي: -1
|
صفحة البدء |
أول صفحة جدول يتم عرضها. يتم الاستخدام فقط إذا كان النوع: الرقم
القيمة التلقائية: 0
|
width |
لتحديد عرض عنصر حاوية التمثيل البصري. يمكنك استخدام وحدات HTML القياسية (على سبيل المثال، "100px" و"80em" و"60"). وفي حال عدم تحديد أي وحدات، يفترض أن يكون الرقم بكسل. وإذا لم يتم تحديده، سيضبط المتصفح العرض تلقائيًا ليلائم الجدول، وسيتم تصغيره قدر الإمكان أثناء العملية، وفي حال ضبط العرض على أقل من العرض المطلوب، سيضيف الجدول شريط تمرير أفقيًا. في حال الضبط على "100%"، سيتم توسيع الجدول بأكبر قدر ممكن في عنصر الحاوية. النوع: سلسلة
افتراضي: تلقائي
|
الطرق
الطريقة | |
---|---|
draw(data, options) |
لرسم الجدول. نوع الإرجاع: لا شيء
|
getSelection() |
التنفيذ القياسي getSelection. عناصر التحديد هي جميع عناصر الصفوف. يمكن عرض أكثر من صف واحد محدّد. تشير فهارس الصفوف في كائن التحديد إلى جدول البيانات الأصلي بغض النظر عن أي تفاعل للمستخدم (ترتيب أو ترحيل أو ما إلى ذلك). تجدر الإشارة إلى أنه تم إيقاف(تحديد) التحديد: يؤدي النقر على خلية إلى تحديدها في المرة الأولى، بينما يؤدي النقر عليها إلى إلغاء تحديدها مرة أخرى، مما ينتج عنه حدث تحديد، ولكن لا يتم تحديد عناصر في كائن التحديد الذي يتم استرداده. نوع العرض: مصفوفة من عناصر التحديد
|
getSortInfo() |
استدعِ هذه الطريقة لاسترداد معلومات عن حالة الترتيب الحالية للجدول الذي تم ترتيبه (عادةً بواسطة المستخدم الذي نقر على عنوان عمود لترتيب الصفوف حسب عمود معيّن). إذا تم تعطيل التصنيف، فلن تعمل هذه الطريقة. في حال عدم ترتيب البيانات في الرمز، أو إذا لم يرتّب المستخدم البيانات من خلال اختيار الرمز، سيتم عرض قيم الترتيب التلقائية. نوع العرض: كائن بالخصائص التالية:
|
setSelection(selection) |
تنفيذ
نوع الإرجاع: لا شيء
|
clearChart() |
محو الرسم البياني وإصدار جميع الموارد المخصّصة له نوع الإرجاع: لا شيء
|
الأحداث
الاسم | |
---|---|
اختيار |
حدث اختيار عادي، ولكن يمكن اختيار صفوف كاملة فقط. الخصائص: بدون
|
الصفحة |
يتم تشغيله عندما ينقر المستخدمون على زر التنقل في الصفحة. الخصائص:
page : الرقم. فهرس الصفحة المطلوب الانتقال إليها. |
ترتيب |
يتم تشغيله عندما ينقر المستخدمون على عنوان عمود، ولا يكون خيار الترتيب "إيقاف". الخصائص: كائن له الخصائص التالية:
|
جاهز |
المخطط جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد مستمع لهذا الحدث قبل طلب طريقة الرسم والاتصال به فقط بعد تنشيط الحدث. الخصائص: بدون
|
التنسيقات
ملاحظة: يتضمّن التمثيل البصري للجدول مجموعة من كائنات التنسيق التي حلّت محلها أدوات تنسيق عامة، تتصرف بالطريقة نفسها، ولكن يمكن استخدامها في أي عرض مرئي.
يعرض الجدول التالي تنسيق الجدول القديم والتنسيق العام المكافئ له. وعليك استخدام التنسيق العام عند كتابة رمز جديد.
أداة تنسيق الجدول | |
---|---|
TableArrowFormat | google.visibleization.ArrowFormat |
تنسيق TableBar | google.Visualization.BarFormat |
تنسيق لون الجدول | google.Visualization.ColorFormat |
تنسيق TableDate | google.Visualization.DateFormat |
تنسيق رقم الجدول | google.visibleization.NumberFormat |
تنسيق النقش | google.Visualization.PatternFormat |
ملاحظة مهمة: يستخدم غالبًا منسّقو لغة HTML تنسيق النص الخاص بهم، لذلك يجب عليك ضبط الخيار allowHtml
على true
.
سياسة البيانات
تتم معالجة جميع الرموز والبيانات وعرضها في المتصفح. ولا يتم إرسال أي بيانات إلى أي خادم.