Nakładki reklamowe

  1. Overview
  2. Prosty przykład
  3. Umieszczanie nakładek w odniesieniu do danych

Omówienie

Nakładka to obszar nałożony na Wykres Google. Najczęściej służy do określania konkretnych statystyk, ale możesz użyć dowolnej liczby, bo to tylko kod HTML i CSS.

Proste użycie obejmuje utworzenie klasy CSS i odwoływanie się do niej w kodzie HTML. Nie jest wymagany JavaScript. Bardziej zaawansowane zastosowania to m.in. dostosowanie pozycji i treści nakładki za pomocą Wykresów Google.

Prosty przykład

W pierwszym przykładzie unikamy JavaScriptu całkowicie i nakładamy tekst na wykresie liniowym:

Wewnętrzny arkusz stylów definiuje 2 klasy, które nazywamy chartWithOverlay i overlay. Pamiętaj, że w chartWithOverlay używamy pozycjonowania względnego i bezwzględnego w overlay.

Następnie w treści strony używamy obiektu chartWithOverlay jako kontenera, w którym umieszczamy nasz wykres (line-chart), a następnie tag overlay.

CSS
.chartWithOverlay {
    position: relative;
    width: 700px;
}
.overlay {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 60px;  /* chartArea top  */
    left: 180px; /* chartArea left */
}
Divs
<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>
Cała strona
<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>

Pozycjonowanie nakładek w stosunku do danych

Czasami najlepsze położenie nakładki zależy od tego, gdzie znajdują się dane na wykresie. np. obok elementu danych.

Powiedzmy, że na wykresie powyżej chcemy zwrócić uwagę na liczbę ataków zombie. Zrobimy to, umieszczając przerażający głowa zombie na końcu linii.

Jednym ze sposobów może być wyrenderowanie wykresu i zakodowanie na stałe współrzędnych. Będzie to działać, ale trzeba będzie je aktualizować po każdej zmianie danych na wykresie. Bardziej solidnym rozwiązaniem byłoby umieszczenie nakładki w odniesieniu do miejsca, w którym znajduje się element danych. Dopóki nie zakończy się renderowanie wykresu, nie możemy określić, gdzie to będzie, dlatego wsłuchujemy się w zdarzenie ready (wywołane po zakończeniu renderowania wykresu) i uzyskamy dostęp do współrzędnych automatycznie za pomocą parametrów getXLocation i 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 */
}
Divs
<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>
Cała strona
<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>