টুলটিপস: একটি ভূমিকা
টুলটিপগুলি হল ছোট বাক্স যা আপনি যখন কোনও কিছুর উপর ঘোরান তখন পপ আপ হয়৷ (হোভারকার্ডগুলি আরও সাধারণ, এবং স্ক্রিনের যে কোনও জায়গায় উপস্থিত হতে পারে; টুলটিপগুলি সর্বদা কোনও কিছুর সাথে সংযুক্ত থাকে, যেমন একটি স্ক্যাটার চার্টে একটি বিন্দু বা বার চার্টে একটি বার৷)
এই ডকুমেন্টেশনে, আপনি শিখবেন কিভাবে গুগল চার্টে টুলটিপ তৈরি এবং কাস্টমাইজ করতে হয়।
টুলটিপের ধরন উল্লেখ করা
Google চার্ট স্বয়ংক্রিয়ভাবে সমস্ত মূল চার্টের জন্য টুলটিপ তৈরি করে। এগুলিকে ডিফল্টরূপে SVG হিসাবে রেন্ডার করা হবে, IE 8 এর অধীনে ছাড়া যেখানে সেগুলি VML হিসাবে রেন্ডার করা হবে৷ আপনি tooltip.isHtml নির্দিষ্ট করে মূল চার্টে HTML টুলটিপ তৈরি করতে পারেন: ড্র() কলে পাস করা চার্ট বিকল্পগুলিতে tooltip.isHtml: true , যা আপনাকে টুলটিপ অ্যাকশন তৈরি করতেও অনুমতি দেবে।
স্ট্যান্ডার্ড টুলটিপস
কোনো কাস্টম সামগ্রীর অনুপস্থিতিতে, অন্তর্নিহিত ডেটার উপর ভিত্তি করে টুলটিপ সামগ্রী স্বয়ংক্রিয়ভাবে তৈরি হয়। আপনি চার্টের যেকোনো বারে আপনার মাউস ঘোরার মাধ্যমে টুলটিপ দেখতে পারেন।
টুলটিপ বিষয়বস্তু কাস্টমাইজ করা
এই উদাহরণে, আমরা DataTable- এ একটি নতুন কলাম যোগ করে টুলটিপ ভূমিকা দিয়ে চিহ্নিত করে টুলটিপে কাস্টম সামগ্রী যোগ করি।
দ্রষ্টব্য: এটি বাবল চার্ট ভিজ্যুয়ালাইজেশন দ্বারা সমর্থিত নয় ।
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Sales');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
['2010', 600,'$600K in our first year!'],
['2011', 1500, 'Sunspot activity made this our best year ever!'],
['2012', 800, '$800K in 2012.'],
['2013', 1000, '$1M in sales last year.']
]);
var options = { legend: 'none' };
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
chart.draw(dataTable, options);
}
HTML টুলটিপ ব্যবহার করে
এই উদাহরণটি এইচটিএমএল টুলটিপ সক্ষম করার মাধ্যমে আগেরটির উপর ভিত্তি করে তৈরি করা হয়েছে। tooltip.isHtml: true ।
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Sales');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
['2010', 600,'$600K in our first year!'],
['2011', 1500, 'Sunspot activity made this our best year ever!'],
['2012', 800, '$800K in 2012.'],
['2013', 1000, '$1M in sales last year.']
]);
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
chart.draw(dataTable, options);
}
এটি দেখতে খুব বেশি আলাদা নয়, তবে এখন আমরা HTML কাস্টমাইজ করতে পারি।
HTML সামগ্রী কাস্টমাইজ করা
পূর্ববর্তী উদাহরণগুলিতে প্লেইন টেক্সট সামগ্রী সহ সমস্ত টুলটিপ ব্যবহার করা হয়েছে, কিন্তু HTML টুলটিপগুলির আসল শক্তি তখনই আসে যখন আপনি HTML মার্কআপ ব্যবহার করে কাস্টমাইজ করতে পারেন৷ এটি সক্ষম করতে, আপনাকে দুটি জিনিস করতে হবে:
-
tooltip.isHtml: true। এটি চার্টকে HTML এ টুলটিপ আঁকতে বলে (SVG এর বিপরীতে)। -
htmlকাস্টম বৈশিষ্ট্য সহ ডেটা টেবিলে একটি সম্পূর্ণ কলাম, বা একটি নির্দিষ্ট ঘর চিহ্নিত করুন। টুলটিপ ভূমিকা এবং HTML বৈশিষ্ট্য সহ একটি ডেটাটেবল কলাম হবে:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})দ্রষ্টব্য: এটি বাবল চার্ট ভিজ্যুয়ালাইজেশনের সাথে কাজ করে না । বাবল চার্ট এইচটিএমএল টুলটিপের বিষয়বস্তু কাস্টমাইজযোগ্য নয়।
গুরুত্বপূর্ণ: নিশ্চিত করুন যে আপনার টুলটিপগুলিতে HTML একটি বিশ্বস্ত উত্স থেকে এসেছে৷ যদি কাস্টম এইচটিএমএল সামগ্রীতে ব্যবহারকারীর তৈরি কোনো সামগ্রী থাকে, তাহলে সেই বিষয়বস্তু থেকে বেরিয়ে আসা গুরুত্বপূর্ণ৷ অন্যথায়, আপনার সুন্দর ভিজ্যুয়ালাইজেশন XSS আক্রমণের জন্য উন্মুক্ত হতে পারে।
কাস্টম HTML বিষয়বস্তু একটি <img> ট্যাগ যোগ করা বা কিছু পাঠ্য বোল্ড করার মতো সহজ হতে পারে:
কাস্টম এইচটিএমএল সামগ্রীতে গতিশীলভাবে তৈরি হওয়া সামগ্রীও অন্তর্ভুক্ত থাকতে পারে। এখানে, আমরা প্রতিটি বিভাগের মানের জন্য একটি গতিশীলভাবে তৈরি করা টেবিল ধারণকারী একটি টুলটিপ যোগ করি। যেহেতু টুলটিপটি সারি মানের সাথে সংযুক্ত থাকে, তাই যেকোনো বারের উপর ঘোরানো HTML টুলটিপ প্রদর্শন করবে।
এই উদাহরণটি দেখায় কিভাবে একটি কাস্টম HTML টুলটিপ একটি ডোমেন কলামের সাথে সংযুক্ত করা যেতে পারে। (পূর্ববর্তী উদাহরণে, এটি একটি ডেটা কলামের সাথে সংযুক্ত ছিল।) ডোমেন অক্ষের জন্য টুলটিপ চালু করতে, focusTarget: 'category' বিকল্পটি সেট করুন।
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Country');
// Use custom HTML content for the domain tooltip.
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', 'Gold');
dataTable.addColumn('number', 'Silver');
dataTable.addColumn('number', 'Bronze');
dataTable.addRows([
['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', 46, 29, 29), 46, 29, 29],
['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
]);
var options = {
title: 'London Olympics Medals',
colors: ['#FFD700', '#C0C0C0', '#8C7853'],
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }
};
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}
function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
'<table class="medals_layout">' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}
ঘূর্ণন টুলটিপ
গুগল চার্টে টুলটিপ CSS দিয়ে ঘোরানো যায়। নীচের চার্টে, টুলটিপগুলি চার্ট ডিভের ঠিক আগে এই ইনলাইন CSS ব্যবহার করে 30° ঘড়ির কাঁটার দিকে ঘোরানো হয়েছে:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
মনে রাখবেন যে এটি শুধুমাত্র HTML টুলটিপগুলির জন্য কাজ করবে, অর্থাৎ, যাদের বিকল্পটি isHtml: true ।
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Fixations'],
['2015', 80],
['2016', 90],
['2017', 100],
['2018', 90],
['2019', 80],
]);
var options = {
tooltip: { isHtml: true }, // CSS styling affects only HTML tooltips.
legend: { position: 'none' },
bar: { groupWidth: '90%' },
colors: ['#A61D4C']
};
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
<div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
</body>
</html>
টুলটিপগুলিতে চার্ট স্থাপন করা
HTML টুলটিপগুলিতে আপনার পছন্দের বেশিরভাগ HTML সামগ্রী অন্তর্ভুক্ত থাকতে পারে—এমনকি একটি Google চার্টও৷ টুলটিপের ভিতরে চার্টের সাহায্যে, আপনার ব্যবহারকারীরা অতিরিক্ত তথ্য পেতে পারে যখন তারা একটি ডেটা উপাদানের উপর ঘোরাফেরা করে: প্রথম নজরে উচ্চ স্তরের বিশদ প্রদান করার একটি ভাল উপায় এবং যখন লোকেরা তাদের পছন্দ করে তখন আরও গভীরে যেতে দেয়৷
নীচের কলামের চার্টটি বেশ কয়েকটি প্রধান ক্রীড়া ইভেন্টের সর্বোচ্চ সাম্প্রতিক দর্শকসংখ্যার একটি চার্ট দেখায়, যার প্রতিটির জন্য টুলটিপগুলি গত দশ বছরে গড় দর্শক সংখ্যার একটি লাইন চার্ট দেখায়৷
এখানে উল্লেখ্য কিছু জিনিস. প্রথমত, একটি টুলটিপে দেখানোর জন্য ডেটার প্রতিটি সেটের জন্য একটি মুদ্রণযোগ্য চার্ট আঁকতে হবে। দ্বিতীয়ত, প্রতিটি টুলটিপ চার্টের একটি "প্রস্তুত" ইভেন্ট হ্যান্ডলারের প্রয়োজন হয়, যেটিকে আমরা একটি মুদ্রণযোগ্য চার্ট তৈরি করতে addListener মাধ্যমে কল করি।
গুরুত্বপূর্ণ: প্রাথমিক চার্টের আগে সমস্ত টুলটিপ চার্ট আঁকতে হবে । প্রাথমিক চার্টের ডেটা টেবিলে যোগ করার জন্য ছবিগুলি দখল করার জন্য এটি প্রয়োজনীয়।
// Draws your charts to pull the PNGs for your tooltips.
function drawTooltipCharts() {
var data = new google.visualization.arrayToDataTable(tooltipData);
var view = new google.visualization.DataView(data);
// For each row of primary data, draw a chart of its tooltip data.
for (var i = 0; i < primaryData.length; i++) {
// Set the view for each event's data
view.setColumns([0, i + 1]);
var hiddenDiv = document.getElementById('hidden_div');
var tooltipChart = new google.visualization.LineChart(hiddenDiv);
google.visualization.events.addListener(tooltipChart, 'ready', function() {
// Get the PNG of the chart and set is as the src of an img tag.
var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';
// Add the new tooltip image to your data rows.
primaryData[i][2] = tooltipImg;
});
tooltipChart.draw(view, tooltipOptions);
}
drawPrimaryChart();
}
function drawPrimaryChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Event');
data.addColumn('number', 'Highest Recent Viewership');
// Add a new column for your tooltips.
data.addColumn({
type: 'string',
label: 'Tooltip Chart',
role: 'tooltip',
'p': {'html': true}
});
// Add your data (with the newly added tooltipImg).
data.addRows(primaryData);
var visibleDiv = document.getElementById('visible_div');
var primaryChart = new google.visualization.ColumnChart(visibleDiv);
primaryChart.draw(data, primaryOptions);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawTooltipCharts);
// Set up data for visible chart.
var primaryData = [
['NBA Finals', 22.4],
['NFL Super Bowl', 111.3],
['MLB World Series', 19.2],
['UEFA Champions League Final', 1.9],
['NHL Stanley Cup Finals', 6.4],
['Wimbledon Men\'s Championship', 2.4]
];
// Set up data for your tooltips.
var tooltipData = [
['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series',
'UEFA Champions League Final', 'NHL Stanley Cup Finals',
'Wimbledon Men\'s Championship'],
['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8],
['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4],
['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8],
['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1],
['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7],
['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3],
['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7],
['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9],
['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5],
['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4]
];
var primaryOptions = {
title: 'Highest U.S. Viewership for Most Recent Event (in millions)',
legend: 'none',
tooltip: {isHtml: true} // This MUST be set to true for your chart to show.
};
var tooltipOptions = {
title: 'U.S. Viewership Over The Last 10 Years (in millions)',
legend: 'none'
};
// Draws your charts to pull the PNGs for your tooltips.
function drawTooltipCharts() {
var data = new google.visualization.arrayToDataTable(tooltipData);
var view = new google.visualization.DataView(data);
// For each row of primary data, draw a chart of its tooltip data.
for (var i = 0; i < primaryData.length; i++) {
// Set the view for each event's data
view.setColumns([0, i + 1]);
var hiddenDiv = document.getElementById('hidden_div');
var tooltipChart = new google.visualization.LineChart(hiddenDiv);
google.visualization.events.addListener(tooltipChart, 'ready', function() {
// Get the PNG of the chart and set is as the src of an img tag.
var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';
// Add the new tooltip image to your data rows.
primaryData[i][2] = tooltipImg;
});
tooltipChart.draw(view, tooltipOptions);
}
drawPrimaryChart();
}
function drawPrimaryChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Event');
data.addColumn('number', 'Highest Recent Viewership');
// Add a new column for your tooltips.
data.addColumn({
type: 'string',
label: 'Tooltip Chart',
role: 'tooltip',
'p': {'html': true}
});
// Add your data (with the newly added tooltipImg).
data.addRows(primaryData);
var visibleDiv = document.getElementById('visible_div');
var primaryChart = new google.visualization.ColumnChart(visibleDiv);
primaryChart.draw(data, primaryOptions);
}
</script>
</head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>
টুলটিপ অ্যাকশন
টুলটিপস জাভাস্ক্রিপ্ট-সংজ্ঞায়িত ক্রিয়াগুলিও অন্তর্ভুক্ত করতে পারে। একটি সাধারণ উদাহরণ হিসাবে, এখানে একটি ক্রিয়া সহ একটি টুলটিপ রয়েছে যা একটি ডায়ালগ বক্স পপ আপ করে যখন ব্যবহারকারী "নমুনা বই দেখুন" এ ক্লিক করেন:
tooltip বিকল্পটি ট্রিগার করে যখন ব্যবহারকারী পাইয়ের একটি কীলক নির্বাচন করে, যার ফলে setAction সংজ্ঞায়িত কোডটি চালানো হয়:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Percentage of my books'],
['Science Fiction', 217],
['General Science', 203],
['Computer Science', 175],
['History', 155],
['Economics/Political Science', 98],
['General Fiction', 72],
['Fantasy', 51],
['Law', 29]
]);
var chart = new google.visualization.PieChart(
document.getElementById('tooltip_action'));
var options = { tooltip: { trigger: 'selection' }};
chart.setAction({
id: 'sample',
text: 'See sample book',
action: function() {
selection = chart.getSelection();
switch (selection[0].row) {
case 0: alert('Ender\'s Game'); break;
case 1: alert('Feynman Lectures on Physics'); break;
case 2: alert('Numerical Recipes in JavaScript'); break;
case 3: alert('Truman'); break;
case 4: alert('Freakonomics'); break;
case 5: alert('The Mezzanine'); break;
case 6: alert('The Color of Magic'); break;
case 7: alert('The Law of Superheroes'); break;
}
}
});
chart.draw(data, options);
}
অ্যাকশনগুলি visible , enabled , উভয়ই বা উভয়ই হতে পারে। যখন একটি Google চার্ট রেন্ডার করা হয়, তখন একটি টুলটিপ অ্যাকশন দেখানো হয় যদি এটি দৃশ্যমান হয় এবং এটি সক্রিয় থাকলে শুধুমাত্র ক্লিক করা যায়। (অক্ষম কিন্তু দৃশ্যমান ক্রিয়াগুলি ধূসর হয়ে গেছে৷)
visible এবং enabled হওয়া উচিত এমন ফাংশন যা সত্য বা মিথ্যা মান প্রদান করে। এই ফাংশনগুলি উপাদান আইডি এবং ব্যবহারকারী নির্বাচনের উপর নির্ভর করতে পারে, আপনাকে অ্যাকশন দৃশ্যমানতা এবং ক্লিকযোগ্যতা সূক্ষ্ম-টিউন করতে দেয়।
টুলটিপ focus পাশাপাশি selection ট্রিগার করতে পারে। যাইহোক, টুলটিপ ক্রিয়াগুলির সাথে, selection পছন্দনীয়। এর ফলে টুলটিপ টিকে থাকে, ব্যবহারকারীকে আরও সহজে ক্রিয়াটি নির্বাচন করতে দেয়।
অ্যাকশনগুলিকে অবশ্যই সতর্ক করার দরকার নেই: আপনি জাভাস্ক্রিপ্ট থেকে যা কিছু করতে পারেন, আপনি একটি অ্যাকশন থেকে করতে পারেন৷ এখানে, আমরা দুটি অ্যাকশন যোগ করব: একটি আমাদের পাই চার্টের একটি ওয়েজ বড় করা, এবং আরেকটি সঙ্কুচিত করা।
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Percentage of my books'],
['Science Fiction', 217],
['General Science', 203],
['Computer Science', 175],
['History', 155],
['Economics & Political Science', 98],
['General Fiction', 72],
['Fantasy', 51],
['Law', 29]
]);
var chart = new google.visualization.PieChart(
document.getElementById('tooltip_action_2'));
var options = { tooltip: { trigger: 'selection' }};
chart.setAction({
id: 'increase',
text: 'Read 20 more books',
action: function() {
data.setCell(chart.getSelection()[0].row, 1,
data.getValue(chart.getSelection()[0].row, 1) + 20);
chart.draw(data, options);
}
});
chart.setAction({
id: 'decrease',
text: 'Read 20 fewer books',
action: function() {
data.setCell(chart.getSelection()[0].row, 1,
data.getValue(chart.getSelection()[0].row, 1) - 20);
chart.draw(data, options);
}
});
chart.draw(data, options);
}
তথ্য টীকা
আপনি কলামের ভূমিকা হিসাবে tooltip পরিবর্তে annotationText ব্যবহার করে সরাসরি একটি Google চার্টে পাঠ্যকে ওভারলে করতে পারেন। (আপনি আপনার মাউস দিয়ে টীকাটির উপর হোভার করে টুলটিপ দেখতে পারেন।)
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'USA');
dataTable.addColumn({type: 'string', role: 'annotation'});
dataTable.addColumn({type: 'string', role: 'annotationText', p: {html:true}});
dataTable.addColumn('number', 'China');
dataTable.addColumn('number', 'UK');
dataTable.addRows([
['2000', 94, '', '', 58, 28],
['2004', 101, '', '', 63, 30],
['2008', 110, 'An all time high!', '<img width=100px src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg">', 100, 47],
['2012', 104, '', '', 88, 65]
]);
var options = { tooltip: {isHtml: true}};
var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
chart.draw(dataTable, options);
}
সমর্থিত চার্ট
HTML টুলটিপগুলি বর্তমানে নিম্নলিখিত চার্ট প্রকারের জন্য সমর্থিত:- এলাকাচার্ট
- বারচার্ট
- ক্যালেন্ডারচার্ট
- ক্যান্ডেলস্টিকচার্ট
- কলামচার্ট
- কম্বোচার্ট
- লাইনচার্ট
- পাই চিত্র
- সানকি ডায়াগ্রাম
- স্ক্যাটারচার্ট
- টাইমলাইন
আপনি যদি annotationText বা tooltip ভূমিকা ব্যবহার করে থাকেন, তাহলে অনুগ্রহ করে ভবিষ্যত পরিবর্তন এবং ভবিষ্যতের ব্যথা এড়াতে ভূমিকা সম্পর্কে ডকুমেন্টেশন দেখুন।