javascript - 单击googlemap javascript上的相应标记时如何在mysql中显示特定ID的实时图表

问题描述

我是一名电气专业的学生，我的毕业论文是“使用 GOOGLE MAP JAVASCRIPT API 实时监控建筑电力”</p>

所以我想问的是我应该使用什么代码，这样每次我点击一个标记（在MYSQL中有一个特定的键为“STT”，它会在旁边准确显示该ID标记的实时chartjs地图

这是它应该是的

下面的图表是实时的，带有设置间隔函数（），但我只能用 1 'STT' 在此处输入图像描述

我一直坚持找到点击时调用每个制造商的实时图表的方法......我希望像点击标记一样显示图表，以在“信息窗口”中显示他们自己的信息，使用AJAX…</p>

这是（ajax.php），每次我单击具有特定 STT（已声明）的制造商时，它都会在该标记的信息窗口中显示信息

enter code here    <?php
    $sql = mysqli_connect('localhost','root','','viethuynh');
    $db = mysqli_select_db($sql,'THONGSO'); 
mysqli_query($sql,"SET NAMES 'utf8'");
if($_GET['stt']){
$result=array();
$ajax = mysqli_query($sql,"SELECT * FROM THONGSO WHERE STT={$_GET['stt']} ORD   ER BY THOIGIAN Desc");
$row = $ajax->fetch_array(MYSQLI_ASSOC);
echo json_encode(array('status'=>1, 'hi'=>$row));
}
else{
echo json_encode(array('status'=>0, 'hi'=>null));
}
exit;?>

这是 INDEX.php 的一部分，Responsecontainer div 将包含地图并设置间隔以从 data.php 加载

enter code here<script type="text/javascript">
var refreshId = setInterval(function()
{
    $('#responsecontainer').load('data.php');
    $('#alarmcontainer').load('alarm.php');

}, 2000);   
 </script>
 <div class="container">
   <div id="responsecontainer"> </div>  
 </div>
 <script>
   var chitiet23 = [
    {lat: 10.794700166183983, lng: 106.72211611533994, stt:1 },//landmark 1
    {lat: 10.794039928032047, lng: 106.72119507244005, stt: 2},//landmark 2
    {lat: 10.794965423476151, lng: 106.7205907214612, stt: 3},//landmark 3
    {lat: 10.795388608948297, lng:  106.72033981464217, stt: 4},//landmark 4 
    {lat: 10.796284577174639, lng: 106.72045262550873, stt: 5},//landmark 5
    {lat: 10.796435865523902, lng: 106.72181569793783, stt: 6},//landmark 6
     ];

     function getInfor2(marker, map, init) { 
          var list=[];
            $.ajax({
              url: "ajax.php?stt="+init.stt,
              type: "GET",
              dataType: "json",
              success: function(temp)
              { 
                if(temp.status==1){
                  var result= temp.hi;
                  list[init.stt] = '<div id="test">' +
                        '<h4 style="color:blue;">Thông Tin Chi Tiết: </h4>' +
                        '<ul style="color:black; font-weight:bold;">' +
                        '<li> TÊN TÒA NHÀ: '+result.ID+'</li>' +                     
                        '<li> STT : ' +result.STT+'</li>' +                          
                        '<li> Thời gian ghi: '+result.THOIGIAN+'</li>' +
                        '<li> Điện năng tiêu thụ (KWh): '+result.DIENNANG+'</li>' +
                        '<li> Tổng tiền điện (VND): '+result.DIENNANG*5000+'</li>' +
                        '</ul>' +    '</div>' ;
              }
   else{alert('dữ liệu không tồn tại trong hệ thống');}
              }
            }); 

            google.maps.event.addListener(marker, 'click', function () 
            { 
              infowindow.setContent(list[init.stt]);
              infowindow.open(map, marker);                 
              var string = '<div id="responsecontainer"></div>';
              document.getElementById('after').innerHTML = (list[init.stt] + string);
            });
       }
  </script>

这是获取chartjs数据的data.php

<?php
  include "config.php";

  $x_thoigian= mysqli_query($conn, 'SELECT THOIGIAN FROM ( SELECT * FROM THONGSO WHERE STT= 1 ORDER BY THOIGIAN DESC LIMIT 5) Var1 ORDER BY THOIGIAN ASC');
  $y_FRE= mysqli_query($conn, 'SELECT FRE FROM( SELECT * FROM THONGSO WHERE STT= 1 ORDER BY THOIGIAN DESC LIMIT 5) Var1 ORDER BY THOIGIAN ASC');
  $y_VOL= mysqli_query($conn, 'SELECT VOL FROM( SELECT * FROM THONGSO WHERE STT= 1 ORDER BY THOIGIAN DESC LIMIT 5) Var1 ORDER BY THOIGIAN ASC');
  $y_AMP= mysqli_query($conn, 'SELECT AMP FROM ( SELECT * FROM THONGSO WHERE STT= 1 ORDER BY THOIGIAN DESC LIMIT 5) Var1 ORDER BY THOIGIAN ASC');
  ?>



    <div class="panel panel-primary" style="position: relative; height: 50vh; width:40vw;">
    <div class="panel-heading">
      <h3 class="panel-title"><center>BIỂU ĐỒ REALTIME</h3>
    </div>

    <canvas id="myChart" > </canvas>
    <script>
       var canvas = document.getElementById('myChart').getContext('2d');
       var data = {
        labels: [<?php while ($b = mysqli_fetch_array($x_thoigian)) { echo '"' . $b['THOIGIAN'] . '",';}?>],
        datasets: [
        {
            label: "TẦN SỐ&quot;,
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(105, 0, 132, .2)",
            borderColor: "rgba(200, 99, 132, .7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(200, 99, 132, .7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(200, 99, 132, .7)",
            pointHoverBorderColor: "rgba(200, 99, 132, .7)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 10,
            data: [<?php while ($b = mysqli_fetch_array($y_FRE)) { echo  $b['FRE'] . ',';}?>],
          },
          ]
       };

        var option = 
      {
         showLines: true,
         animation: {duration: 0}

        };
    
       var myLineChart = Chart.Line(canvas,{
          data:data,
          options:option
         });

         </script>          
        </div>

多谢

标签： javascriptphpmysqlgoogle-maps-api-3chart.js

javascript - 单击googlemap javascript上的相应标记时如何在mysql中显示特定ID的实时图表

问题描述

解决方案

推荐阅读