概览
十字形是以图表中的数据点为中心的垂直和水平细线。作为图表创建者，当您在图表中启用十字线时，用户将能够定位单个元素：
十字形可在焦点和/或所选内容上显示。它们适用于散点图、折线图、面积图以及组合图表的折线和面积部分。
简单示例
将鼠标悬停在下面的各个点上或选择它们，即可看到十字准线：
以下是创建上述图表的完整网页，其中十字线用粗体表示：
<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（选择后） |