การวางซ้อน

  1. ภาพรวม
  2. ตัวอย่างง่ายๆ
  3. การวางตำแหน่งของการวางซ้อนที่สัมพันธ์กับข้อมูล

ภาพรวม

การวางซ้อนคือพื้นที่ที่วางอยู่เหนือ Google แผนภูมิ ซึ่งมักจะใช้แสดงสถิติบางอย่าง แต่เป็นอะไรก็ได้ที่คุณต้องการเพราะเป็นเพียง HTML และ CSS

การใช้งานแบบง่ายๆ นั้นรวมถึงการสร้างคลาส CSS และอ้างอิงถึงคลาสนั้นใน HTML ของคุณ ไม่จำเป็นต้องใช้ JavaScript การใช้งานขั้นสูงขึ้นอาจรวมถึงการใช้ Google แผนภูมิเพื่อปรับแต่งตำแหน่งและเนื้อหาของการวางซ้อน

ตัวอย่างง่ายๆ

สำหรับตัวอย่างแรก เราจะหลีกเลี่ยง JavaScript ทั้งหมดและวางซ้อนข้อความบางส่วนบนแผนภูมิเส้น

สไตล์ชีตภายในจะกำหนดคลาส 2 รายการที่เราเรียกว่า chartWithOverlay และ overlay โปรดทราบว่าเราใช้การจัดตำแหน่งแบบสัมพัทธ์ใน chartWithOverlay และการจัดตำแหน่งแบบสัมบูรณ์ใน overlay

จากนั้น ในส่วนเนื้อหาของหน้า เราจะใช้ chartWithOverlay เป็นที่เก็บสำหรับวางแผนภูมิ (line-chart) ตามด้วย overlay

CSS
.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>
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>
แบบเต็มหน้า
<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

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 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>
แบบเต็มหน้า
<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>