概览
叠加层是叠加在 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>