סקירה כללית
צלבים הם קווים דקים אנכיים ואופקיים שממורכזים בנקודת נתונים בתרשים. כשאתם, כיוצרי תרשימים, מפעילים צלבים בתרשימים, המשתמשים שלכם יכולים לטרגט אלמנט יחיד:
צלבים יכולים להופיע בהתמקדות, בבחירה או בשניהם. הם זמינים לתרשימי פיזור, לתרשימי קו, לתרשימי שטח ולחלקי הקו והשטח של תרשימים משולבים.
דוגמה פשוטה
מציבים את סמן העכבר מעל הנקודות שלמטה או בוחרים אותן כדי לראות צלבים:
לפניכם דף אינטרנט שלם שיוצר את התרשים שלמעלה, עם הקווים המודגשים:
<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 } | להגדיר את צבע הצלב כ-color_string, למשל 'red' או '#f00' |
crosshair: { opacity: opacity_number } | הגדרת השקיפות של הצלב ל-opacity_number, כאשר 0.0 שקופה באופן מלא ו-1.0 אטום לחלוטין |
crosshair: { focused: { color: color_string } } | הגדרת צבע הצלב כ-color_string בהתמקדות |
crosshair: { focused: { opacity: opacity_number } } | הגדרת השקיפות של הצלב ל-opacity_number בהתמקדות |
crosshair: { selected: { color: color_string } } | הגדרת צבע הצלב כ-color_string בזמן הבחירה |
crosshair: { selected: { opacity: opacity_number } } | הגדרת השקיפות של 'צלב' כ-opacity_number לפי הבחירה |