Question

我正在尝试使用谷歌图表api创建饼图。它没有问题，并且在localhost上进行测试时显示完美。

但是当我把整个代码放在我的ec2 linux实例上时。它创建图表框，给出标题但不绘制图表。可能是什么错误？

数据来自mysql数据库。我检查了表格及其内容，但它与我的localhost相同。

url.php

<html>
   <head>
      <title>ThenWat</title>

    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript">
    google.load('visualization', '1', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);    


    function drawVisualization(dataFromAjax) {

    var jsonData = $.ajax({
          url: "ajax_graph_temp.php",
          dataType:"json",
          async: false
          }).responseText;
    var data = new google.visualization.DataTable(jsonData);
        var options = {
           title: 'Index analysis',
          is3D: 'true',
          width: 800,
          height: 600
        };
        alert("");
        var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
        chart.draw(data, options);
         }
function makeAjaxCall() {
      $.ajax({url:'url.php',
              data: {},
              success: function(responseData) {
                         drawVisualization();
                       }
        });
    }
     </script>
   </head>
   <body style="height: 560px">
           <img alt="" src= "3.png" style="top: 38px; right: 689px; position: absolute; height: 91px; width: 417px"/>
               <form action="data.php" method="POST" onsubmit="showUser(this, event)">
            <div style="z-index: 1; left: 470px; top: 100px; position: absolute; margin-top: 0px">              
               <label>Enter URL: <input type="text" name="sent"></label><br/>
            </div>
            <div style="z-index: 1; left: 420px; top: 160px; position: absolute; margin-top: 0px">  <button> Fire me </button>      
            </div>
         </form>
         <div style="z-index: 1; left: 660px; top: 160px; position: absolute; margin-top: 0px"> 
            <button onclick="makeAjaxCall(); return false;" value="View Graph" > View Graph </button>
         </div>

         <div id="txtHint" style="z-index: 1; left: 220px; top: 250px; position: absolute; margin-top: 0px">        
         </div>

   </body>
</html>

ajax_graph_temp.php

<?php
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
  $result = $mysqli->query('SELECT * FROM view_name');

  $rows = array();
  $table = array();
  $table['cols'] = array(
    array('label' => 'pcount', 'type' => 'string'),
    array('label' => 'ncount', 'type' => 'number')
);
    /* Extract the information from $result */
    foreach($result as $r) {
      $temp = array();
      $temp[] = array('v' => (string) $r['ind_type']); 
      $temp[] = array('v' => (int) $r['Index_val']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

// convert data into JSON format
$jsonTable = json_encode($table);
echo $jsonTable;
?>

Answer 1

您设置代码的方式是，您正在进行两次AJAX调用，其中第一次似乎没有完成任何操作：

function makeAjaxCall() {
    $.ajax({url:'url.php',
        data: {},
        success: function(responseData) {
            drawVisualization();
        }
    });
}

对于要查询的AJAX调用，您是否有“url.php”？如果没有，那么你的成功函数永远不会触发，因此永远不会调用drawVisualization。除非您有此功能的其他计划，否则您可以像这样简化代码：

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

function drawVisualization(dataFromAjax) {
    var data = new google.visualization.DataTable(dataFromAjax);
    var options = {
        title: 'Index analysis',
        is3D: 'true',
        width: 800,
        height: 600
    };
    var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
    chart.draw(data, options);
}
function makeAjaxCall() {
    $.ajax({
        url: "ajax_graph_temp.php",
        dataType:"json",
        success: drawVisualization
    });
}

使用谷歌图表api显示图表

1 个答案: