ক্রসশেয়ার
সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
ওভারভিউ
ক্রসশেয়ারগুলি একটি চার্টের একটি ডেটা পয়েন্টকে কেন্দ্র করে পাতলা উল্লম্ব এবং অনুভূমিক রেখা। যখন আপনি, একজন চার্ট নির্মাতা হিসাবে, আপনার চার্টে ক্রসহেয়ারগুলি সক্ষম করেন, তখন আপনার ব্যবহারকারীরা একটি একক উপাদানকে লক্ষ্য করতে সক্ষম হবেন:
ক্রসশেয়ারগুলি ফোকাস, নির্বাচন বা উভয় ক্ষেত্রেই উপস্থিত হতে পারে। এগুলি স্ক্যাটার চার্ট , লাইন চার্ট , এলাকা চার্ট এবং কম্বো চার্টের লাইন এবং এলাকার অংশগুলির জন্য উপলব্ধ।
একটি সহজ উদাহরণ
ক্রসহেয়ারগুলি দেখতে নীচের পয়েন্টগুলির উপর হোভার করুন, বা সেগুলি নির্বাচন করুন:
এখানে একটি সম্পূর্ণ ওয়েব পৃষ্ঠা রয়েছে যা উপরের চার্টটি তৈরি করে, ক্রসহেয়ারগুলির জন্য লাইন বোল্ড করে:
<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 = new google.visualization.DataTable();
data.addColumn('number');
data.addColumn('number');
for (var i = 0; i < 100; i++)
data.addRow([Math.floor(Math.random()*100),
Math.floor(Math.random()*100)]);
var options = {
legend: 'none',
crosshair: { trigger: 'both' } // Display crosshairs on focus and selection.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
ক্রসশেয়ার বিকল্প
নিম্নলিখিত ক্রসহেয়ার বিকল্পগুলি উপলব্ধ:
crosshair: { trigger: 'both' } | ফোকাস এবং নির্বাচন উভয়ই প্রদর্শন করুন |
crosshair: { trigger: 'focus' } | শুধুমাত্র ফোকাস প্রদর্শন |
crosshair: { trigger: 'selection' } | শুধুমাত্র নির্বাচনের উপর প্রদর্শন করুন |
crosshair: { orientation: 'both' } | উভয় অনুভূমিক এবং উল্লম্ব চুল প্রদর্শন |
crosshair: { orientation: 'horizontal' } | শুধুমাত্র অনুভূমিক চুল প্রদর্শন |
crosshair: { orientation: 'vertical' } | শুধুমাত্র উল্লম্ব চুল প্রদর্শন |
crosshair: { color: color_string } | কালার_স্ট্রিং -এ ক্রসহেয়ার রঙ সেট করুন, যেমন, 'red' বা '#f00' |
crosshair: { opacity: opacity_number } | ক্রসহেয়ার অপাসিটি অপাসিটি_নম্বরে সেট করুন, 0.0 সম্পূর্ণ স্বচ্ছ এবং 1.0 সম্পূর্ণ অস্বচ্ছ সহ |
crosshair: { focused: { color: color_string } } | ফোকাসের উপর কালার_স্ট্রিং -এ ক্রসহেয়ার রঙ সেট করুন |
crosshair: { focused: { opacity: opacity_number } } | ফোকাসের উপর অপাসিটি_নম্বরে ক্রসহেয়ার অপাসিটি সেট করুন |
crosshair: { selected: { color: color_string } } | নির্বাচনের সময় কালার_স্ট্রিং -এ ক্রসহেয়ার রঙ সেট করুন |
crosshair: { selected: { opacity: opacity_number } } | নির্বাচনের উপর অপাসিটি_ নম্বরে ক্রসহেয়ার অপাসিটি সেট করুন |
অন্য কিছু উল্লেখ না করা থাকলে, এই পৃষ্ঠার কন্টেন্ট Creative Commons Attribution 4.0 License-এর অধীনে এবং কোডের নমুনাগুলি Apache 2.0 License-এর অধীনে লাইসেন্স প্রাপ্ত। আরও জানতে, Google Developers সাইট নীতি দেখুন। Java হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।
2024-07-10 UTC-তে শেষবার আপডেট করা হয়েছে।
[null,null,["2024-07-10 UTC-তে শেষবার আপডেট করা হয়েছে।"],[],[],null,["# Crosshairs\n\n1. [Overview](#overview)\n2. [A Simple Example](#simple_example)\n3. [Crosshair Options](#options)\n\nOverview\n--------\n\nCrosshairs are thin vertical and horizontal lines centered on a\ndata point in a chart. When you, as a chart creator, enable crosshairs\nin your charts, your users will then be able to target a single\nelement:\n\nCrosshairs can appear on focus, selection, or both. They're\navailable for [scatter charts](/chart/interactive/docs/gallery/scatterchart),\n[line charts](/chart/interactive/docs/gallery/linechart), [area charts](/chart/interactive/docs/gallery/areachart),\nand for the line and area portions\nof [combo\ncharts](/chart/interactive/docs/gallery/combochart).\n\nA Simple Example\n----------------\n\nHover over the points below, or select them, to see crosshairs: \n\nHere's a complete web page that creates the above chart, with the\nline for crosshairs in bold: \n\n```\n\u003chtml\u003e\n \u003chead\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n google.charts.load(\"current\", {packages:[\"corechart\"]});\n google.charts.setOnLoadCallback(drawChart);\n function drawChart() {\n var data = new google.visualization.DataTable();\n data.addColumn('number');\n data.addColumn('number');\n for (var i = 0; i \u003c 100; i++)\n data.addRow([Math.floor(Math.random()*100),\n Math.floor(Math.random()*100)]);\n var options = {\n legend: 'none',\n crosshair: { trigger: 'both' } // Display crosshairs on focus and selection.\n };\n var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));\n chart.draw(data, options);\n }\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"chart_div\" style=\"width: 900px; height: 500px;\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nCrosshair Options\n-----------------\n\nThe following crosshair options are available:\n\n|------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|\n| `crosshair: { trigger: 'both' }` | display on both focus and selection |\n| `crosshair: { trigger: 'focus' }` | display on focus only |\n| `crosshair: { trigger: 'selection' }` | display on selection only |\n| `crosshair: { orientation: 'both' }` | display both horizontal and vertical hairs |\n| `crosshair: { orientation: 'horizontal' }` | display horizontal hairs only |\n| `crosshair: { orientation: 'vertical' }` | display vertical hairs only |\n| `crosshair: { color: `*color_string*` }` | set crosshair color to *color_string* , e.g., `'red'` or `'#f00'` |\n| `crosshair: { opacity: `*opacity_number*` }` | set crosshair opacity to *opacity_number* , with `0.0` being fully transparent and `1.0` fully opaque |\n| `crosshair: { focused: { color: `*color_string*` } }` | set crosshair color to *color_string* on focus |\n| `crosshair: { focused: { opacity: `*opacity_number*` } }` | set crosshair opacity to *opacity_number* on focus |\n| `crosshair: { selected: { color: `*color_string*` } }` | set crosshair color to *color_string* on selection |\n| `crosshair: { selected: { opacity: `*opacity_number*` } }` | set crosshair opacity to *opacity_number* on selection |"]]
