概览
叠加层是叠加在 Google 图表上的区域。它通常用于指明特定统计信息，但也可以使用，因为它只是 HTML 和 CSS。
简单的用法包括创建 CSS 类，然后在 HTML 中直接引用该类；无需使用 JavaScript。更高级的使用情形包括使用 Google 图表自定义叠加层的位置和内容。
简单示例
对于第一个示例，我们将完全避免使用 JavaScript，而只在折线图上叠加一些文本：
在这里，内部样式表定义了两个类，我们分别称为 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>