个人中心
gpt4 book ai didi

javascript - 显示使用 google 图表 api 的图表

转载 作者：行者123 更新时间：2023-11-28 01:57:42 25 4
gpt4 key购买 nike

我正在尝试使用谷歌图表 API 创建饼图。它没有问题，并且在本地主机上测试时显示完美。

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

数据取自mysql数据库。我检查了表及其内容，但它与我的本地主机上的相同。

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;
?>

最佳答案

您设置代码的方式是进行两个 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
    });
}

关于javascript - 显示使用 google 图表 api 的图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18870635/

25 4 0
文章推荐： javascript - 循环选择列表菜单以创建搜索过滤器
文章推荐： javascript - iframe内容可以改变 "title"页面吗？
文章推荐： javascript - jQuery/JS 可以检查什么改变了输入吗？
文章推荐： javascript - window.print 在 IE 和 Chrome 中打印不同的 URL？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com