Geochart 在包含 PHP 代码后不起作用

Question

当我包含 PHP 代码时，地理图表不工作。

下面是添加 PHP 之前的代码，可以正常工作：

  google.load('visualization','1', {
    'packages':['geochart'],
  });
 google.setOnLoadCallback(drawVisualization);

  function drawVisualization() {var data = new google.visualization.DataTable();
      data.addColumn('number', 'LATITUDE');                                
      data.addColumn('number', 'LONGITUDE');
      data.addColumn('string', 'DESCRIPTION'); 
      data.addColumn('number', 'A:', 'value'); 
      data.addColumn({type:'string', role:'tooltip'});                        

data.addRows([[3.9374,102.3620, 'Jerantut', 0,'tooltip']]); //jerantut,phg

data.addRows([[ 4.7549,103.4156, 'Kuala Dungun', 1,'tooltip']]); //terengganu


    var options = {
      region: 'MY', // Africa
      displayMode: 'markers',
      resolution: 'provinces',
      colorAxis: {minValue: 0, maxValue: 0,  colors: ['#6699CC']},
      sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 25},
      legend: 'none',  
      enableRegionInteractivity: 'true', 
      backgroundColor: '#ffffff',
      datalessRegionColor: '#D2F5F4',
      defaultColor: '#f5f5f5',
    };

     var chart = new   google.visualization.GeoChart(document.getElementById('visualization'));

下面是添加PHP代码后的代码：

function drawVisualization() {var data = new google.visualization.DataTable(
        data.addColumn('number', 'LATITUDE');
        data.addColumn('number', 'LONGITUDE');
        data.addColumn('string', 'DESCRIPTION');
        data.addColumn('number', 'A:', 'value'); 

$exec = mysqli_query($con,$query);
 while(echo json_encode( $row );){
data.addRows([['city_lat', 'city_long', 'student_city', 'count']]);
};

数据库结构：

请告诉我添加 PHP 代码后出现了什么问题以及如何解决这个问题。

数据库详细：

已更新

 $sql='select count(`student_city`) as count,
    `city_lat`,
    `city_long`,
    concat(`student_city`, ", ",`student_state`) as `description` 
from marketing_data GROUP BY student_city asc LIMIT 3';

Answer 1

我猜我会说你可以这样做，但我应该强调我无法测试这个。

function drawVisualization() {
    var data = new google.visualization.DataTable(
        data.addColumn('number', 'LATITUDE');
        data.addColumn('number', 'LONGITUDE');
        data.addColumn('string', 'DESCRIPTION');
        data.addColumn('number', 'A:', 'value');

    <?php
        /*

            Iterate through the recordset
            and add a new row to the datatable
            for each result.

        */

        $res = mysqli_query($con,$query);
        while( $rs=$res->fetch_object() ){
            printf(
                'data.addRow[ %s, %s, %s, %d ]',
                floatval( $rs->city_lat ),
                floatval( $rs->city_long ),
                $rs->student_city,
                intval( $rs->count )
            );
        }

    ?>

    var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
    var options = {
      region: 'MY', // Africa
      displayMode: 'markers',
      resolution: 'provinces',
      colorAxis: {minValue: 0, maxValue: 0,  colors: ['#6699CC']},
      sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 25},
      legend: 'none',  
      enableRegionInteractivity: 'true', 
      backgroundColor: '#ffffff',
      datalessRegionColor: '#D2F5F4',
      defaultColor: '#f5f5f5',
    };

    chart.draw( data, options );
}

更新现在看上面的事实，上面的明显错误是显而易见的。在调用 printf 的循环中，'data.addRow[ %s, %s, %s, %d ]', 省略了大括号，因此它应该是 'data.addRow( [ %s, %s, %s, %d ] )',。

基于您的代码但结构略有不同的工作版本：

<?php

    $dbhost =   'localhost';
    $dbuser =   'dbo-user'; 
    $dbpwd  =   'xxx'; 
    $dbname =   'xxx';

    mysqli_report( MYSQLI_REPORT_STRICT );
    $db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );

    /*
        A slightly modified version of original schema
        ----------------------------------------------

        mysql> describe gm_asia_students;
        +---------------+------------------+------+-----+---------+----------------+
        | Field         | Type             | Null | Key | Default | Extra          |
        +---------------+------------------+------+-----+---------+----------------+
        | id            | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
        | matriculation | int(10) unsigned | YES  |     | NULL    |                |
        | prg           | varchar(255)     | YES  |     | NULL    |                |
        | semester      | varchar(10)      | YES  |     | NULL    |                |
        | intake        | year(4)          | YES  |     | NULL    |                |
        | city          | varchar(50)      | YES  |     | NULL    |                |
        | lat           | double           | YES  |     | NULL    |                |
        | lng           | double           | YES  |     | NULL    |                |
        | state         | varchar(128)     | YES  |     | NULL    |                |
        | code          | varchar(6)       | YES  |     | NULL    |                |
        +---------------+------------------+------+-----+---------+----------------+


        mysql> select * from gm_asia_students;
        +----+---------------+------+----------+--------+--------------+--------+----------+------------+-------+
        | id | matriculation | prg  | semester | intake | city         | lat    | lng      | state      | code  |
        +----+---------------+------+----------+--------+--------------+--------+----------+------------+-------+
        |  1 |        894635 | 404  | 1        |   2020 | Kuala Dungan | 4.7549 | 103.4156 | Terengganu | MY-11 |
        |  2 |        845615 | 303  | 1        |   2020 | Kuala Dungan | 4.7956 | 103.3231 | Terengganu | MY-06 |
        |  3 |        956325 | 808  | 1        |   2020 | Jerentut     | 3.9374 |  102.362 | Pahang     | MY-11 |
        +----+---------------+------+----------+--------+--------------+--------+----------+------------+-------+

    */

    $sql='select 
        `lat`,
        `lng`,
        concat(`city`, ", ",`state`) as `description` 
    from gm_asia_students';
    $res=$db->query( $sql );

    $tmp=[];
    while( $rs=$res->fetch_object() )$tmp[]=$rs;
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Google Visualisations:: GeoChart</title>
        <style>

            #chart{ 
                width:100%;
                height:100vh;
                float:none;
                margin:auto;
            }
        </style>
        <script src='//www.gstatic.com/charts/loader.js'></script>
        <script>
            google.charts.load( 'current', {
                'packages':['geochart'],
                'mapsApiKey':'LEGITIMATE-MAPS-APIKEY'
            });
            <?php
                # create json variable to be consumed by the dataTable
                printf('
                var data=%s;',json_encode( $tmp ) );

            ?>
            function renderchart(){
                var container=document.getElementById( 'chart' );
                var datatbl=new google.visualization.DataTable();
                    datatbl.addColumn('number','lat');
                    datatbl.addColumn('number','lng');
                    datatbl.addColumn('string','description');

                data.forEach( obj=>{
                    let row=[ parseFloat( obj.lat ), parseFloat( obj.lng ), obj.description ];
                    datatbl.addRow( row );
                });

                var options={
                    region:'MY',    // NOT Africa, but South-Eastern Asia!
                    displayMode:'markers',
                    resolution:'provinces',

                    colorAxis:{ minValue:0, maxValue:0,  colors:['#6699CC'] },
                    sizeAxis:{ minValue:1, maxValue:1, minSize:10,  maxSize:25 },

                    magnifyingGlass:{ enable: true, zoomFactor: 7.5 },
                    markerOpacity:0.75,

                    legend:'none',

                    enableRegionInteractivity:true, 
                    keepAspectRatio:true,

                    backgroundColor:'#ffffff',
                    datalessRegionColor:'#D2F5F4',
                    defaultColor:'#f5f5f5'
                };

                var chart=new google.visualization.GeoChart( container );
                    chart.draw( datatbl, options );

                container.addEventListener( 'click', (e)=>{ console.info( getSelection() ) } );
            };

            google.charts.setOnLoadCallback( renderchart );
        </script>
    </head>
    <body>
        <div id='chart'></div>
    </body>
</html>

Geochart 在包含 PHP 代码后不起作用

Geochart not working after include the PHP code

php

mysql

google-visualization