ওভারভিউ
একটি ওভারলে হল একটি Google চার্টের উপরে রাখা একটি এলাকা। এটি সাধারণত একটি নির্দিষ্ট পরিসংখ্যান কল করার জন্য ব্যবহৃত হয়, কিন্তু আপনি যা চান তা হতে পারে যেহেতু এটি শুধুমাত্র HTML এবং CSS।
সহজ ব্যবহারে একটি CSS ক্লাস তৈরি করা এবং এটিকে আপনার HTML এ উল্লেখ করা জড়িত; কোন জাভাস্ক্রিপ্ট প্রয়োজন. ওভারলে এর অবস্থান এবং বিষয়বস্তু কাস্টমাইজ করতে Google চার্ট ব্যবহার করে আরও উন্নত ব্যবহার জড়িত হতে পারে।
একটি সহজ উদাহরণ
আমাদের প্রথম উদাহরণের জন্য, আমরা জাভাস্ক্রিপ্ট সম্পূর্ণরূপে এড়িয়ে যাব এবং কেবল একটি লাইন চার্টে কিছু পাঠ্য ওভারলে করব:
এখানে, একটি অভ্যন্তরীণ স্টাইলশীট দুটি ক্লাস সংজ্ঞায়িত করে যেগুলিকে আমরা chartWithOverlay এবং overlay বলি। মনে রাখবেন যে আমরা chartWithOverlay আপেক্ষিক অবস্থান এবং overlay পরম অবস্থান ব্যবহার করি।
তারপরে, আমাদের ওয়েব পৃষ্ঠার মূল অংশে, আমরা একটি chartWithOverlay একটি ধারক হিসাবে ব্যবহার করি যার মধ্যে আমরা আমাদের চার্ট ( line-chart ) এবং তারপরে আমাদের overlay রাখি।
.chartWithOverlay {
position: relative;
width: 700px;
}
.overlay {
width: 200px;
height: 200px;
position: absolute;
top: 60px; /* chartArea top */
left: 180px; /* chartArea left */
}
<div class="chartWithOverlay"> <div id="line-chart" style="width: 700px; height: 500px;"></div> <div class="overlay"> <div style="font-family:'Arial Black'; font-size: 128px;">88</div> <div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div> <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div> </div> </div>
<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 = new google.visualization.arrayToDataTable([
['Threat', 'Attacks'],
['Chandrian', 38],
['Ghosts', 12],
['Ghouls', 6],
['UFOs', 44],
['Vampires', 28],
['Zombies', 88]
]);
var options = {
legend: 'none',
colors: ['#760946'],
vAxis: { gridlines: { count: 4 } }
};
var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
chart.draw(data, options);
}
</script>
<html>
<head>
<style>
.chartWithOverlay {
position: relative;
width: 700px;
}
.overlay {
width: 200px;
height: 200px;
position: absolute;
top: 60px; /* chartArea top */
left: 180px; /* chartArea left */
}
</style>
<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 = new google.visualization.arrayToDataTable([
['Threat', 'Attacks'],
['Chandrian', 38],
['Ghosts', 12],
['Ghouls', 6],
['UFOs', 44],
['Vampires', 28],
['Zombies', 88]
]);
var options = {
legend: 'none',
colors: ['#760946'],
vAxis: { gridlines: { count: 4 } }
};
var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="chartWithOverlay">
<div id="line-chart" style="width: 700px; height: 500px;"></div>
<div class="overlay">
<div style="font-family:'Arial Black'; font-size: 128px;">88</div>
<div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div>
<div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div>
</div>
</div>
</body>
</html>
পজিশনিং ওভারলে ডেটার সাথে সম্পর্কিত
কখনও কখনও একটি ওভারলের জন্য সর্বোত্তম অবস্থান নির্ভর করে চার্টে ডেটা কোথায় শেষ হয় তার উপর। উদাহরণস্বরূপ, আমরা একটি ডেটা উপাদানের কাছাকাছি একটি চিত্র স্থাপন করতে চাই।
ধরা যাক আমরা উপরের চার্টে জম্বি আক্রমণের সংখ্যার প্রতি দৃষ্টি আকর্ষণ করতে চেয়েছিলাম। আমরা লাইনের শেষে একটি ভীতিকর জম্বি মাথা রেখে এটি করব।
এটি করার একটি উপায় হ'ল চার্ট রেন্ডার করা এবং আমাদের স্থানাঙ্কগুলিকে হার্ডকোড করা। এটি কাজ করবে, কিন্তু যখনই চার্টের ডেটা পরিবর্তন হবে তখনই আপডেট করার প্রয়োজন হবে৷ একটি আরও শক্তিশালী সমাধান আমাদেরকে ওভারলে স্থাপন করতে হবে যেখানে ডেটা উপাদানটি অনস্ক্রীনে শেষ হয়। যেহেতু চার্ট রেন্ডারিং শেষ না হওয়া পর্যন্ত এটি কোথায় হবে তা আমরা জানতে পারি না, তাই আমরা ready ইভেন্টের জন্য শুনব (যাকে চার্ট রেন্ডারিং করা হয়) এবং getXLocation এবং getYLocation এর সাথে প্রোগ্রাম্যাটিকভাবে স্থানাঙ্কগুলি অ্যাক্সেস করব:
.chartWithMarkerOverlay {
position: relative;
width: 700px;
}
.overlay-text {
width: 200px;
height: 200px;
position: absolute;
top: 50px; /* chartArea top */
left: 200px; /* chartArea left */
}
.overlay-marker {
width: 50px;
height: 50px;
position: absolute;
top: 53px; /* chartArea top */
left: 528px; /* chartArea left */
}
<div class="chartWithMarkerOverlay">
<div id="line-chart-marker" style="width: 700px; height: 500px;"></div>
<div class="overlay-text">
<div style="font-family:'Arial Black'; font-size: 128px;">88</div>
<div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div>
<div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div>
</div>
<div class="overlay-marker">
<img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50">
</div>
</div>
<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 = new google.visualization.arrayToDataTable([
['Threat', 'Attacks'],
['Chandrian', 38],
['Ghosts', 12],
['Ghouls', 6],
['UFOs', 44],
['Vampires', 28],
['Zombies', 88]
]);
var options = {
legend: 'none',
colors: ['#760946'],
lineWidth: 4,
vAxis: { gridlines: { count: 4 } }
};
function placeMarker(dataTable) {
var cli = this.getChartLayoutInterface();
var chartArea = cli.getChartAreaBoundingBox();
// "Zombies" is element #5.
document.querySelector('.overlay-marker').style.top = Math.floor(cli.getYLocation(dataTable.getValue(5, 1))) - 50 + "px";
document.querySelector('.overlay-marker').style.left = Math.floor(cli.getXLocation(5)) - 10 + "px";
};
var chart = new google.visualization.LineChart(document.getElementById('line-chart-marker'));
google.visualization.events.addListener(chart, 'ready',
placeMarker.bind(chart, data));
chart.draw(data, options);
}
</script>
<html>
<head>
<style>
.chartWithMarkerOverlay {
position: relative;
width: 700px;
}
.overlay-text {
width: 200px;
height: 200px;
position: absolute;
top: 50px; /* chartArea top */
left: 200px; /* chartArea left */
}
.overlay-marker {
width: 50px;
height: 50px;
position: absolute;
top: 53px; /* chartArea top */
left: 528px; /* chartArea left */
}
</style>
<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 = new google.visualization.arrayToDataTable([
['Threat', 'Attacks'],
['Chandrian', 38],
['Ghosts', 12],
['Ghouls', 6],
['UFOs', 44],
['Vampires', 28],
['Zombies', 88]
]);
var options = {
legend: 'none',
colors: ['#760946'],
lineWidth: 4,
vAxis: { gridlines: { count: 4 } }
};
function placeMarker(dataTable) {
var cli = this.getChartLayoutInterface();
var chartArea = cli.getChartAreaBoundingBox();
// "Zombies" is element #5.
document.querySelector('.overlay-marker').style.top = Math.floor(cli.getYLocation(dataTable.getValue(5, 1))) - 50 + "px";
document.querySelector('.overlay-marker').style.left = Math.floor(cli.getXLocation(5)) - 10 + "px";
};
var chart = new google.visualization.LineChart(document.getElementById('line-chart-marker'));
google.visualization.events.addListener(chart, 'ready',
placeMarker.bind(chart, data));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="chartWithMarkerOverlay">
<div id="line-chart-marker" style="width: 700px; height: 500px;"></div>
<div class="overlay-text">
<div style="font-family:'Arial Black'; font-size: 128px;">88</div>
<div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div>
<div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div>
</div>
<div class="overlay-marker">
<img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50">
</div>
</div>
</body>
</html>