叠加层

叠加层是叠加在 Google 图表上的区域。它通常用于指明特定统计信息,但也可以使用,因为它只是 HTML 和 CSS。

简单的用法包括创建 CSS 类,然后在 HTML 中直接引用该类;无需使用 JavaScript。更高级的使用情形包括使用 Google 图表自定义叠加层的位置和内容。

对于第一个示例,我们将完全避免使用 JavaScript,而只在折线图上叠加一些文本:

在这里,内部样式表定义了两个类,我们分别称为 chartWithOverlayoverlay。请注意,我们在 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 事件(在图表渲染完成时调用),并使用 getXLocationgetYLocation 以编程方式访问坐标:

.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>