谷歌图表不显示来自 MySql 数据库的结果答案

【问题标题】：Google chart does not display results from MySql database谷歌图表不显示来自 MySql 数据库的结果
【发布时间】：2020-01-20 03:46:41
【问题描述】：

我在使用谷歌图表时遇到问题，但没有出现任何内容。当我删除 php 代码时，它说没有数据，但它只是没有出现代码。代码如下：

   <?php
    $con = mysqli_connect('localhost', 'root', '');
    mysqli_select_db($con, 'gamefort');

    $s = " select naziv, broj from konzola group by naziv ";
    $result = mysqli_query($con, $s);
    ?>

<script type="text/javascript">
        google.charts.load('current', {
            'packages': ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.arrayToDataTable([
                ['Naziv','Broj'],
                <?php
                while($row = mysqli_fetch_assoc($result)){
                    echo "['".$row["naziv"].",".$row["broj"]."'],";
                }
                ?>
            ]);

            var options = {
                'title': 'Statistika',
                'width': 400,
                'height': 300
            };

            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
</script>

有什么建议吗？提前致谢。

【问题讨论】：

标签： php mysql google-visualization

【解决方案1】：

使用动态 php 代码

<?php 
$con = mysqli_connect('localhost', 'root', '','gamefort');

$s = "select naziv, broj from konzola group by naziv";
$result = mysqli_query($con, $s);
$data_array = array();

while($row = mysqli_fetch_assoc($result)){

    //$data_array[] = array_values($row);
    $data_array[] = ($row);
}
  $chart= json_encode($data_array);


?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>


 <!-- <input type="text" value="x" id="test" /> -->
  <div id="Salesman" style="width: 650px; height: 500px;"></div> 

</body>

</body>
</html>



<script type="text/javascript">



  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var chart_array= <?php echo $chart; ?>;

    var header = ['Naziv', 'Broj'];
    var row = "";            
    var rows = new Array();

      jQuery.each(chart_array, function( i, d ) {
         row = [d.naziv,Number(d.broj)];
          rows.push(row);
        });  

       var jsonData = [header].concat(rows);

      var data = google.visualization.arrayToDataTable(jsonData);
    var options = {
      title : 'Month & Yearly Total Sales Values',
      vAxis: {title: 'Total Sales'},
      hAxis: {title: 'Month & Year'},
      seriesType: 'bars',
      showRowNumber: 'false'

    };
    var chart = new google.visualization.ComboChart(document.getElementById('Salesman'));
    chart.draw(data, options);
    }


</script>

【讨论】：

【解决方案2】：

使用此代码

    <?php
    $con = mysqli_connect('localhost', 'root', '');
    mysqli_select_db($con, 'gamefort');

    $s = " select naziv, broj from konzola group by naziv ";
    $result = mysqli_query($con, $s);
    $data_array = array();

    while($row = mysqli_fetch_assoc($result)){


        $data_array[] = ($row);
    }
  $chart= json_encode($data_array);
    ?>

<script type="text/javascript">
        google.charts.load('current', {
            'packages': ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

        var chart_array= '<?php echo $chart; ?>';
        var header = ['Naziv', 'Broj'];
         var row = "";            
         var rows = new Array();



      jQuery.each(chart_array, function( i, d ) {
         row = [parseInt(d.naziv),parseInt(d.broj)];

         rows.push(row);
        });  

       var jsonData = [header].concat(rows);

      var data = google.visualization.arrayToDataTable(jsonData);

            var options = {
                'title': 'Statistika',
                'width': 400,
                'height': 300
            };

            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
</script>

【讨论】：

嗯，它是一样的，它可以在没有 php 代码的情况下工作，但是一旦我添加它它就不会显示。
你能分享你的数据库表吗？
在我的示例中，查询输出为：NINTENDO 3 PC 24 PS4 10 XBOX 18 控制台名称 = naziv 和编号 = broj