ওভারভিউ
একটি টেবিল যা সাজানো এবং পৃষ্ঠা করা যেতে পারে। ফর্ম্যাট স্ট্রিং ব্যবহার করে বা সরাসরি সেল মান হিসাবে এইচটিএমএল সন্নিবেশ করে টেবিলের ঘরগুলি ফর্ম্যাট করা যেতে পারে। সংখ্যাসূচক মান ডান-সারিবদ্ধ; বুলিয়ান মান চেক মার্ক হিসাবে প্রদর্শিত হয়. ব্যবহারকারীরা কীবোর্ড বা মাউস দিয়ে একক সারি নির্বাচন করতে পারেন। ব্যবহারকারীরা কলাম হেডারে ক্লিক করে সারি সাজাতে পারেন। ব্যবহারকারী স্ক্রোল করার সাথে সাথে হেডার সারিটি স্থির থাকে। সারণীটি ব্যবহারকারীর মিথস্ক্রিয়া সম্পর্কিত বেশ কয়েকটি ইভেন্টকে আগুন দেয়।
উদাহরণ
<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 টেবিলের একটি সারি/কলামে রূপান্তরিত হয়। প্রতিটি কলাম একই ডেটা টাইপের হতে হবে এবং সমস্ত স্ট্যান্ডার্ড ভিজ্যুয়ালাইজেশন ডেটা টাইপ সমর্থিত (স্ট্রিং, বুলিয়ান, নম্বর, ইত্যাদি)।
কাস্টম বৈশিষ্ট্য
আপনি DataTable- এর setProperty() পদ্ধতি ব্যবহার করে ডেটা টেবিল উপাদানগুলিতে নিম্নলিখিত কাস্টম বৈশিষ্ট্যগুলি বরাদ্দ করতে পারেন।
| সম্পত্তির নাম | প্রযোজ্য | বর্ণনা |
|---|---|---|
| শ্রেণির নাম | সেল | একটি পৃথক কক্ষে বরাদ্দ করার জন্য একটি স্ট্রিং শ্রেণীর নাম৷ পৃথক কক্ষে CSS স্টাইলিং বরাদ্দ করতে এটি ব্যবহার করুন। |
| শৈলী | সেল | কক্ষে ইনলাইন বরাদ্দ করার জন্য একটি শৈলী স্ট্রিং। এটি সেই কক্ষে প্রয়োগ করা CSS ক্লাস শৈলীকে ওভাররাইড করবে। এটি কাজ করার জন্য আপনাকে allowHtml=true সম্পত্তি সেট করতে হবে। উদাহরণ: 'border: 1px solid green;' . |
উদাহরণ
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});কনফিগারেশন অপশন
| নাম | |
|---|---|
| অনুমতি এইচটিএমএল | যদি সত্যে সেট করা হয়, HTML ট্যাগগুলি অন্তর্ভুক্ত করে এমন ঘরগুলির বিন্যাসিত মানগুলিকে HTML হিসাবে রেন্ডার করা হবে। মিথ্যাতে সেট করা হলে, বেশিরভাগ কাস্টম ফরম্যাটার সঠিকভাবে কাজ করবে না। প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা |
| alternatingRowStyle | বিজোড় এবং জোড় সারিতে বিকল্প রঙের শৈলী বরাদ্দ করা হবে কিনা তা নির্ধারণ করে। প্রকার: বুলিয়ান ডিফল্ট: সত্য |
| cssClassNames | একটি বস্তু যেখানে প্রতিটি সম্পত্তির নাম একটি টেবিল উপাদান বর্ণনা করে, এবং সম্পত্তি মান একটি স্ট্রিং, যে টেবিল উপাদান বরাদ্দ করার জন্য একটি শ্রেণী সংজ্ঞায়িত করে। আপনার টেবিলের নির্দিষ্ট উপাদানগুলিতে কাস্টম CSS বরাদ্দ করতে এই বৈশিষ্ট্যটি ব্যবহার করুন। এই বৈশিষ্ট্যটি ব্যবহার করার জন্য, একটি বস্তু বরাদ্দ করুন, যেখানে সম্পত্তির নাম টেবিলের উপাদানটি নির্দিষ্ট করে এবং সম্পত্তির মানটি একটি স্ট্রিং, যে উপাদানটিতে বরাদ্দ করার জন্য একটি শ্রেণির নাম উল্লেখ করে। তারপর আপনাকে অবশ্যই আপনার পৃষ্ঠায় সেই ক্লাসের জন্য একটি CSS শৈলী সংজ্ঞায়িত করতে হবে। নিম্নলিখিত সম্পত্তির নাম সমর্থিত:
উদাহরণ: দ্রষ্টব্য: CSS-এ, কিছু উপাদান অন্যকে ওভাররাইড করে। উদাহরণস্বরূপ, আপনি যদি একটি প্রকার: বস্তু ডিফল্ট: নাল |
| firstRowNumber | ডেটা টেবিলের প্রথম সারির সারি নম্বর। শুধুমাত্র showRowNumber সত্য হলেই ব্যবহৃত হয়। প্রকার: সংখ্যা ডিফল্ট: 1 |
| হিমায়িত কলাম | বাম থেকে কলামের সংখ্যা যা হিমায়িত হবে। অবশিষ্ট কলামগুলি অনুভূমিকভাবে স্ক্রোল করার সময় এই কলামগুলি জায়গায় থাকবে৷ যদি প্রকার: সংখ্যা ডিফল্ট: নাল |
| উচ্চতা | ভিজ্যুয়ালাইজেশনের ধারক উপাদানের উচ্চতা সেট করে। আপনি স্ট্যান্ডার্ড HTML ইউনিট ব্যবহার করতে পারেন (উদাহরণস্বরূপ, '100px', '80em', '60')। যদি কোনো ইউনিট নির্দিষ্ট করা না থাকে তাহলে সংখ্যাটিকে পিক্সেল বলে ধরে নেওয়া হয়। নির্দিষ্ট করা না থাকলে, ব্রাউজার টেবিলের সাথে মানানসই করার জন্য স্বয়ংক্রিয়ভাবে উচ্চতা সামঞ্জস্য করবে, প্রক্রিয়ায় যতটা সম্ভব সঙ্কুচিত হবে; যদি প্রয়োজনীয় উচ্চতার চেয়ে ছোট সেট করা হয়, তাহলে টেবিলটি একটি উল্লম্ব স্ক্রল বার যুক্ত করবে (হেডার সারিটিও হিমায়িত)। '100%' তে সেট করা হলে, টেবিলটি যতটা সম্ভব ধারক উপাদানে প্রসারিত হবে। প্রকার: স্ট্রিং ডিফল্ট: স্বয়ংক্রিয় |
| পৃষ্ঠা | যদি এবং কিভাবে ডেটার মাধ্যমে পেজিং সক্ষম করা যায়। নিম্নলিখিত স্ট্রিং মানগুলির মধ্যে একটি চয়ন করুন:
প্রকার: স্ট্রিং ডিফল্ট: 'অক্ষম করুন' |
| পাতার আকার | প্রতিটি পৃষ্ঠায় সারির সংখ্যা, যখন পৃষ্ঠা বিকল্পটি দিয়ে পেজিং সক্ষম করা হয়। প্রকার: সংখ্যা ডিফল্ট: 10 |
| পেজিং বোতাম | পেজিং বোতামগুলির জন্য একটি নির্দিষ্ট বিকল্প সেট করে। বিকল্পগুলি নিম্নরূপ:
প্রকার: স্ট্রিং বা সংখ্যা ডিফল্ট: 'অটো' |
| rtl টেবিল | টেবিলের কলামের ক্রম বিপরীত করে ডান-থেকে-বাম ভাষার (যেমন আরবি বা হিব্রু) জন্য মৌলিক সমর্থন যোগ করে, যাতে কলাম শূন্য হয় ডানদিকের কলাম, এবং শেষ কলামটি বাঁদিকের কলাম। এটি অন্তর্নিহিত ডেটার কলাম সূচীকে প্রভাবিত করে না, শুধুমাত্র প্রদর্শনের ক্রম। সম্পূর্ণ দ্বি-দিকনির্দেশক (BiDi) ভাষা প্রদর্শন এই বিকল্পের সাথেও টেবিল ভিজ্যুয়ালাইজেশন দ্বারা সমর্থিত নয়। এই বিকল্পটি উপেক্ষা করা হবে যদি আপনি পেজিং সক্রিয় করেন (পৃষ্ঠা বিকল্প ব্যবহার করে), অথবা যদি টেবিলে স্ক্রোল বার থাকে কারণ আপনি প্রয়োজনীয় টেবিলের আকারের চেয়ে ছোট উচ্চতা এবং প্রস্থ বিকল্পগুলি নির্দিষ্ট করেছেন। প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা |
| scrollLeftStartPosition | অনুভূমিক স্ক্রোলিং অবস্থান সেট করে, পিক্সেলে, যদি টেবিলে অনুভূমিক স্ক্রল বার থাকে কারণ আপনি প্রস্থের বৈশিষ্ট্য সেট করেছেন। টেবিলটি স্ক্রোল করে খুলবে যা বাম কলামের অনেক পিক্সেল অতিক্রম করে। প্রকার: সংখ্যা ডিফল্ট: 0 |
| showRowNumber | সত্য হিসাবে সেট করা হলে, সারণির প্রথম কলাম হিসাবে সারি সংখ্যা দেখায়। প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা |
| সাজান | ব্যবহারকারী যখন একটি কলাম শিরোনাম ক্লিক করেন তখন কলামগুলি কীভাবে বাছাই করবেন। যদি সাজানো সক্ষম করা থাকে, তাহলে sortAscending এবং sortColumn বৈশিষ্ট্যগুলিও সেট করার কথা বিবেচনা করুন। নিম্নলিখিত স্ট্রিং মানগুলির মধ্যে একটি চয়ন করুন:
প্রকার: স্ট্রিং ডিফল্ট: 'সক্ষম' |
| সাজান আরোহী | যে ক্রমে প্রাথমিক সাজানোর কলাম সাজানো হয়েছে। আরোহের জন্য সত্য, অবতরণের জন্য মিথ্যা। উপেক্ষা করা হয় যদি প্রকার: বুলিয়ান ডিফল্ট: সত্য |
| বাছাই কলাম | ডেটা টেবিলের একটি কলামের একটি সূচী, যার দ্বারা টেবিলটি প্রাথমিকভাবে সাজানো হয়। কলামটি সাজানোর ক্রম নির্দেশ করে একটি ছোট তীর দিয়ে চিহ্নিত করা হবে। প্রকার: সংখ্যা ডিফল্ট: -1 |
| প্রথম পাতা | প্রদর্শনের জন্য প্রথম টেবিল পৃষ্ঠা। প্রকার: সংখ্যা ডিফল্ট: 0 |
| প্রস্থ | ভিজ্যুয়ালাইজেশনের ধারক উপাদানের প্রস্থ সেট করে। আপনি স্ট্যান্ডার্ড HTML ইউনিট ব্যবহার করতে পারেন (উদাহরণস্বরূপ, '100px', '80em', '60')। যদি কোনো ইউনিট নির্দিষ্ট করা না থাকে তাহলে সংখ্যাটিকে পিক্সেল বলে ধরে নেওয়া হয়। নির্দিষ্ট করা না থাকলে, ব্রাউজার টেবিলের সাথে মানানসই করার জন্য স্বয়ংক্রিয়ভাবে প্রস্থ সামঞ্জস্য করবে, প্রক্রিয়ায় যতটা সম্ভব সঙ্কুচিত হবে; প্রয়োজনীয় প্রস্থের চেয়ে ছোট সেট করা হলে, টেবিলটি একটি অনুভূমিক স্ক্রল বার যোগ করবে। '100%' তে সেট করা হলে, টেবিলটি যতটা সম্ভব ধারক উপাদানে প্রসারিত হবে। প্রকার: স্ট্রিং ডিফল্ট: স্বয়ংক্রিয় |
পদ্ধতি
| পদ্ধতি | |
|---|---|
draw(data, options) | টেবিল আঁকে। রিটার্ন টাইপ: কোনোটিই নয় |
getSelection() | স্ট্যান্ডার্ড getSelection বাস্তবায়ন। নির্বাচন উপাদান সব সারি উপাদান. একাধিক নির্বাচিত সারি ফেরত দিতে পারে। সিলেকশন অবজেক্টের সারি ইনডেক্সগুলি ব্যবহারকারীর কোনো ইন্টারঅ্যাকশন (বাছাই, পেজিং, ইত্যাদি) নির্বিশেষে মূল ডেটা টেবিলকে নির্দেশ করে। মনে রাখবেন যে নির্বাচন(গুলি) টগল করুন: প্রথমবার নির্বাচন করার সময় একটি ঘরে ক্লিক করলে; কক্ষটিতে আবার ক্লিক করলে সেটিকে অনির্বাচন করা হয়, যার ফলে একটি নির্বাচন ইভেন্ট হয়, কিন্তু পুনরুদ্ধার করা নির্বাচন বস্তুতে কোনো নির্বাচিত আইটেম নেই। রিটার্ন টাইপ: নির্বাচন উপাদানের অ্যারে |
getSortInfo() | সাজানো টেবিলের বর্তমান সাজানোর অবস্থা সম্পর্কে তথ্য পুনরুদ্ধার করতে এই পদ্ধতিটি কল করুন (সাধারণত ব্যবহারকারী দ্বারা, যিনি একটি নির্দিষ্ট কলাম দ্বারা সারিগুলি সাজানোর জন্য একটি কলাম শিরোনামে ক্লিক করেছেন)। আপনি বাছাই নিষ্ক্রিয় থাকলে, এই পদ্ধতি কাজ করবে না। আপনি যদি কোডে ডেটা বাছাই না করে থাকেন, বা ব্যবহারকারী কোড নির্বাচন করে ডেটা সাজান না, ডিফল্ট সাজানোর মানগুলি ফেরত দেওয়া হবে। রিটার্ন টাইপ: নিম্নলিখিত বৈশিষ্ট্য সহ একটি বস্তু:
|
setSelection(selection) | স্ট্যান্ডার্ড রিটার্ন টাইপ: কোনোটিই নয় |
clearChart() | চার্টটি সাফ করে এবং এর সমস্ত বরাদ্দকৃত সংস্থান প্রকাশ করে। রিটার্ন টাইপ: কোনোটিই নয় |
ঘটনা
| নাম | |
|---|---|
| নির্বাচন করুন | স্ট্যান্ডার্ড নির্বাচন ইভেন্ট, কিন্তু শুধুমাত্র সম্পূর্ণ সারি নির্বাচন করা যেতে পারে. বৈশিষ্ট্য: কোনটিই নয় |
| পৃষ্ঠা | ব্যবহারকারীরা পৃষ্ঠা নেভিগেশন বোতামে ক্লিক করলে ট্রিগার হয়। বৈশিষ্ট্য: page : সংখ্যা. নেভিগেট করার জন্য পৃষ্ঠার সূচী৷ |
| সাজান | ব্যবহারকারীরা যখন একটি কলাম হেডারে ক্লিক করেন তখন ট্রিগার হয় এবং সাজানোর বিকল্পটি 'অক্ষম' হয় না। বৈশিষ্ট্য: নিম্নলিখিত বৈশিষ্ট্য সহ একটি বস্তু:
|
| প্রস্তুত | চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে ড্র পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি বরখাস্ত হওয়ার পরেই তাদের কল করতে হবে। বৈশিষ্ট্য: কোনটিই নয় |
ফরম্যাটার
দ্রষ্টব্য: টেবিল ভিজ্যুয়ালাইজেশনে ফরম্যাটার অবজেক্টের একটি সেট রয়েছে যা জেনেরিক ফরম্যাটার দ্বারা স্থগিত করা হয়েছে, যেগুলি একইভাবে আচরণ করে, কিন্তু যেকোন ভিজ্যুয়ালাইজেশনে ব্যবহার করা যেতে পারে।
নিম্নলিখিত টেবিলটি লিগ্যাসি টেবিল ফরম্যাটার এবং এর সমতুল্য জেনেরিক ফরম্যাটার দেখায়। নতুন কোড লেখার সময় আপনার জেনেরিক ফরম্যাটার ব্যবহার করা উচিত।
| টেবিল ফরম্যাটার | |
|---|---|
| টেবিল অ্যারো ফরম্যাট | google.visualization.ArrowFormat |
| টেবিলবার ফরম্যাট | google.visualization.BarFormat |
| টেবিল কালার ফরম্যাট | google.visualization.ColorFormat |
| টেবিল তারিখ ফরম্যাট | google.visualization.DateFormat |
| টেবিল নম্বর ফরম্যাট | google.visualization.Number Format |
| টেবিলপ্যাটার্ন ফরম্যাট | google.visualization.PatternFormat |
গুরুত্বপূর্ণ: ফরম্যাটাররা প্রায়ই তাদের টেক্সট ফরম্যাট করতে HTML ব্যবহার করে; অতএব, আপনার allowHtml বিকল্পটি true হিসাবে সেট করা উচিত।
ডেটা নীতি
সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।