Overlay

  1. Ringkasan
  2. Contoh Sederhana
  3. Memosisikan Overlay Relatif terhadap Data

Ringkasan

Overlay adalah area yang diletakkan di atas Diagram Google. Ini biasanya digunakan untuk menyebutkan statistik tertentu, tetapi bisa juga apa saja yang Anda inginkan karena itu hanya HTML dan CSS.

Penggunaan sederhana melibatkan pembuatan class CSS dan cukup merujuknya di HTML; tidak diperlukan JavaScript. Penggunaan lanjutan dapat melibatkan penggunaan Google Chart untuk menyesuaikan posisi dan konten overlay.

Contoh Sederhana

Untuk contoh pertama, kita akan menghindari JavaScript sepenuhnya dan hanya menempatkan beberapa teks pada diagram garis:

Di sini, stylesheet internal menentukan dua class yang kita sebut chartWithOverlay dan overlay. Perhatikan bahwa kita menggunakan pemosisian relatif di chartWithOverlay dan pemosisian absolut di overlay.

Kemudian, dalam isi halaman web, kita menggunakan chartWithOverlay sebagai penampung untuk menempatkan diagram (line-chart), lalu overlay.

CSS
.chartWithOverlay {
    position: relative;
    width: 700px;
}
.overlay {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 60px;  /* chartArea top  */
    left: 180px; /* chartArea left */
}
Div
<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>
JavaScript
   <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>
Halaman penuh
<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>

Memosisikan Overlay Relatif terhadap Data

Terkadang posisi terbaik untuk overlay bergantung pada tempat data berakhir pada diagram. Misalnya, kita mungkin ingin menempatkan gambar di dekat elemen data.

Katakanlah kita ingin menarik perhatian pada jumlah serangan zombie pada bagan di atas. Kita akan melakukan ini dengan menempatkan kepala zombie menakutkan di akhir baris.

Salah satu cara untuk melakukannya adalah dengan merender diagram dan melakukan hardcode pada koordinat kita. Tindakan ini akan berfungsi, tetapi perlu diperbarui setiap kali data diagram berubah. Solusi yang lebih andal akan membuat kita menempatkan overlay relatif terhadap tempat elemen data berakhir di layar. Karena kita tidak dapat mengetahui lokasi aset hingga diagram selesai dirender, kita akan memproses peristiwa ready (yang dipanggil saat diagram selesai dirender) dan mengakses koordinat secara terprogram dengan getXLocation dan getYLocation:

CSS
.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
<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>
JavaScript
  <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>
Halaman penuh
<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>