ภาพรวม
การวางซ้อน คือพื้นที่ที่วางอยู่เหนือแผนภูมิ Google ซึ่งโดยทั่วไปแล้วจะใช้เรียกสถิติบางอย่าง แต่ก็อาจเป็นอะไรก็ได้ที่ต้องการเพราะ HTML และ CSS เท่านั้น
การใช้แบบง่ายเกี่ยวข้องกับการสร้างคลาส CSS และอ้างอิงถึงใน HTML ของคุณ โดยไม่ต้องใช้ JavaScript การใช้งานขั้นสูงยิ่งขึ้นอาจเกี่ยวข้องกับการใช้ Google Charts เพื่อปรับแต่งตําแหน่งและเนื้อหาการวางซ้อน
ตัวอย่างง่ายๆ
สําหรับตัวอย่างแรก เราจะหลีกเลี่ยง JavaScript โดยสิ้นเชิงและเพียงวางซ้อนข้อความบางส่วนในแผนภูมิเส้น
ในสไตล์ชีตภายในจะเป็นตัวกําหนด 2 คลาสที่เราเรียกว่า 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>