بررسی اجمالی
جدولی که قابل مرتب سازی و صفحه بندی است. سلول های جدول را می توان با استفاده از رشته های قالب یا با درج مستقیم 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);
فرمت داده ها
DataTable به یک جدول HTML مربوطه تبدیل می شود و هر سطر/ستون در DataTable به یک سطر/ستون در جدول HTML تبدیل می شود. هر ستون باید از یک نوع داده باشد و همه انواع داده های تجسم استاندارد پشتیبانی می شوند (رشته، بولی، عدد و غیره).
ویژگی های سفارشی
با استفاده از متد setProperty() DataTable می توانید ویژگی های سفارشی زیر را به عناصر جدول داده اختصاص دهید.
| نام ملک | اعمال می شود | شرح |
|---|---|---|
| نام کلاس | سلول | یک نام کلاس رشته ای برای اختصاص دادن به یک سلول جداگانه. از این برای اختصاص استایل CSS به سلول های جداگانه استفاده کنید. |
| سبک | سلول | یک رشته سبک برای تخصیص درون خطی به سلول. با این کار سبک های کلاس CSS اعمال شده در آن سلول لغو می شود. برای این کار باید ویژگی allowHtml=true را تنظیم کنید. مثال: 'border: 1px solid green;' . |
مثال
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});گزینه های پیکربندی
| نام | |
|---|---|
| allowHtml | اگر روی true تنظیم شود، مقادیر قالب‌بندی شده سلول‌هایی که شامل برچسب‌های HTML هستند به‌عنوان HTML ارائه می‌شوند. اگر روی false تنظیم شود، اکثر فرمت‌کننده‌های سفارشی به درستی کار نمی‌کنند. نوع: بولی پیش فرض: نادرست |
| متناوب RowStyle | تعیین می کند که آیا سبک رنگ متناوب به ردیف های زوج و فرد اختصاص داده می شود. نوع: بولی پیش فرض: درست است |
| cssClassNames | یک شی که در آن نام هر ویژگی یک عنصر جدول را توصیف می کند و مقدار ویژگی یک رشته است که کلاسی را برای اختصاص دادن به آن عنصر جدول تعریف می کند. از این ویژگی برای اختصاص CSS سفارشی به عناصر خاصی از جدول خود استفاده کنید. برای استفاده از این ویژگی، یک شی اختصاص دهید، جایی که نام ویژگی عنصر جدول را مشخص می کند، و مقدار ویژگی یک رشته است، که نام کلاسی را برای اختصاص دادن به آن عنصر مشخص می کند. سپس باید یک سبک CSS برای آن کلاس در صفحه خود تعریف کنید. نام اموال زیر پشتیبانی می شود:
مثال: توجه: در CSS، برخی از عناصر، برخی دیگر را لغو می کنند. به عنوان مثال، اگر یک رنگ پس زمینه برای یک عنصر نوع: شی پیش فرض: null |
| firstRowNumber | شماره ردیف برای ردیف اول در dataTable. فقط در صورتی استفاده می شود که showRowNumber درست باشد. نوع: شماره پیش فرض: 1 |
| ستون های منجمد | تعداد ستون‌هایی که از سمت چپ ثابت می‌شوند. این ستون ها هنگام اسکرول کردن ستون های باقی مانده به صورت افقی در جای خود باقی می مانند. اگر نوع: شماره پیش فرض: null |
| ارتفاع | ارتفاع عنصر ظرف تجسم را تنظیم می کند. می توانید از واحدهای استاندارد HTML استفاده کنید (به عنوان مثال، '100px'، '80em'، '60'). اگر هیچ واحدی مشخص نشده باشد، عدد پیکسل در نظر گرفته می شود. اگر مشخص نشده باشد، مرورگر به طور خودکار ارتفاع را متناسب با جدول تنظیم می کند و در این فرآیند تا حد امکان کوچک می شود. اگر کوچکتر از ارتفاع مورد نیاز تنظیم شود، جدول یک نوار اسکرول عمودی اضافه می کند (ردیف سرصفحه نیز ثابت است). اگر روی "100%" تنظیم شود، جدول تا حد امکان به عنصر ظرف گسترش می یابد. نوع: رشته پیش فرض: خودکار |
| صفحه | آیا و چگونه می توان صفحه بندی از طریق داده ها را فعال کرد. یکی از مقادیر رشته زیر را انتخاب کنید:
نوع: رشته پیش فرض: "غیرفعال کردن" |
| اندازه صفحه | تعداد سطرهای هر صفحه، زمانی که صفحه بندی با گزینه page فعال است. نوع: شماره پیش فرض: 10 |
| دکمه های صفحه بندی | یک گزینه مشخص برای دکمه های صفحه بندی تنظیم می کند. گزینه ها به شرح زیر است:
نوع: رشته یا عدد پیش فرض: "خودکار" |
| rtlTable | با معکوس کردن ترتیب ستون های جدول، پشتیبانی اولیه را برای زبان های راست به چپ (مانند عربی یا عبری) اضافه می کند، به طوری که ستون صفر سمت راست ترین ستون و آخرین ستون سمت چپ ترین ستون باشد. این بر شاخص ستون در داده‌های زیربنایی تأثیر نمی‌گذارد، فقط ترتیب نمایش را تحت تأثیر قرار می‌دهد. نمایش زبان کامل دو جهته (BiDi) توسط تجسم جدول حتی با این گزینه پشتیبانی نمی شود. اگر صفحه‌بندی را فعال کنید (با استفاده از گزینه صفحه)، یا اگر جدول دارای نوارهای پیمایش باشد، این گزینه نادیده گرفته می‌شود، زیرا گزینه‌های ارتفاع و عرض کوچکتر از اندازه جدول مورد نیاز را مشخص کرده‌اید. نوع: بولی پیش فرض: نادرست |
| scrollLeftStartPosition | اگر جدول دارای نوارهای اسکرول افقی باشد، موقعیت اسکرول افقی را بر حسب پیکسل تنظیم می کند، زیرا ویژگی عرض را تنظیم کرده اید. جدول با پیمایش تعداد زیادی پیکسل از سمت چپ ترین ستون باز می شود. نوع: شماره پیش فرض: 0 |
| showRowNumber | اگر روی true تنظیم شود، شماره ردیف را به عنوان ستون اول جدول نشان می دهد. نوع: بولی پیش فرض: نادرست |
| مرتب سازی | اگر و چگونه می توان ستون ها را هنگامی که کاربر روی عنوان ستون کلیک می کند مرتب کرد. اگر مرتب سازی فعال است، ویژگی های sortAscending و sortColumn را نیز در نظر بگیرید. یکی از مقادیر رشته زیر را انتخاب کنید:
نوع: رشته پیش فرض: "فعال کردن" |
| مرتب سازی صعودی | ترتیب مرتب‌سازی ستون مرتب‌سازی اولیه. درست برای صعود، نادرست برای نزول. اگر نوع: بولی پیش فرض: درست است |
| مرتب سازی ستون | شاخصی از یک ستون در جدول داده ها، که در ابتدا جدول بر اساس آن مرتب می شود. ستون با یک فلش کوچک که ترتیب مرتب سازی را نشان می دهد مشخص می شود. نوع: شماره پیش فرض: -1 |
| صفحه شروع | اولین صفحه جدول برای نمایش فقط در صورتی استفاده می شود که نوع: شماره پیش فرض: 0 |
| عرض | عرض عنصر ظرف تجسم را تنظیم می کند. می توانید از واحدهای استاندارد HTML استفاده کنید (به عنوان مثال، '100px'، '80em'، '60'). اگر هیچ واحدی مشخص نشده باشد، عدد پیکسل در نظر گرفته می شود. اگر مشخص نشده باشد، مرورگر به طور خودکار عرض را برای تناسب با جدول تنظیم می کند و در این فرآیند تا حد امکان کوچک می شود. اگر کوچکتر از عرض مورد نیاز تنظیم شود، جدول یک نوار اسکرول افقی اضافه می کند. اگر روی "100%" تنظیم شود، جدول تا حد امکان به عنصر ظرف گسترش می یابد. نوع: رشته پیش فرض: خودکار |
مواد و روش ها
| روش | |
|---|---|
draw(data, options) | جدول را می کشد. نوع بازگشت: ندارد |
getSelection() | پیاده سازی استاندارد getSelection. عناصر انتخاب همه عناصر ردیف هستند. می تواند بیش از یک ردیف انتخاب شده را برگرداند. شاخص های ردیف در شی انتخاب به جدول داده های اصلی بدون توجه به هرگونه تعامل کاربر (مرتب سازی، صفحه بندی و غیره) اشاره می کنند. توجه داشته باشید که انتخاب(ها) تغییر می کند: با کلیک بر روی یک سلول برای اولین بار آن را انتخاب می کنید. با کلیک مجدد روی سلول، آن را از حالت انتخاب خارج می‌کند و در نتیجه یک رویداد انتخابی ایجاد می‌شود، اما هیچ مورد انتخابی در شی انتخابی بازیابی شده وجود ندارد. نوع بازگشت: آرایه ای از عناصر انتخابی |
getSortInfo() | این روش را برای بازیابی اطلاعات مربوط به وضعیت مرتب سازی فعلی جدولی که مرتب شده است (معمولاً توسط کاربر که روی عنوان ستون کلیک کرده است تا ردیف ها را بر اساس یک ستون خاص مرتب کند) بازیابی کنید. اگر مرتب سازی را غیرفعال کرده اید، این روش کار نخواهد کرد. اگر داده ها را در کد مرتب نکرده باشید، یا کاربر با انتخاب کد، داده ها را مرتب نکرده باشد، مقادیر مرتب سازی پیش فرض برگردانده می شوند. نوع بازگشت: یک شی با ویژگی های زیر:
|
setSelection(selection) | اجرای استاندارد نوع بازگشت: ندارد |
clearChart() | نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند. نوع بازگشت: ندارد |
مناسبت ها
| نام | |
|---|---|
| انتخاب کنید | رویداد انتخاب استاندارد، اما فقط کل ردیف‌ها را می‌توان انتخاب کرد. خواص: ندارد |
| صفحه | هنگامی که کاربران روی دکمه پیمایش صفحه کلیک می کنند فعال می شود. خواص: page : شماره. فهرست صفحه ای که باید به آن پیمایش کنید. |
| مرتب سازی | هنگامی که کاربران روی سرصفحه ستون کلیک می‌کنند فعال می‌شود و گزینه مرتب‌سازی «غیرفعال» نیست. Properties: یک شی با ویژگی های زیر:
|
| آماده | نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی متد قرعه‌کشی، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید. خواص: ندارد |
فرمت کننده ها
توجه: تجسم جدول دارای مجموعه‌ای از اشیاء قالب‌کننده است که توسط قالب‌کننده‌های عمومی جایگزین شده‌اند، که به همین شکل عمل می‌کنند، اما می‌توانند در هر تصویرسازی استفاده شوند.
جدول زیر قالب‌کننده جدول قدیمی و قالب‌کننده عمومی معادل آن را نشان می‌دهد. هنگام نوشتن کد جدید باید از قالب‌کننده عمومی استفاده کنید.
| شکل‌دهنده جدول | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
مهم: قالب‌سازها اغلب از HTML برای قالب‌بندی متن خود استفاده می‌کنند. بنابراین، باید گزینه allowHtml را روی true تنظیم کنید.
سیاست داده
تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.