Google 图表 API 无法在 pythonanywhere.com 上上传的 web2py 应用程序上运行

Question

我创建了一个 web2py 应用程序并将其上传到 pythonanywhere.com。在我的应用程序中，我使用 Google 图表 API 来创建图形和图表。它在我的本地系统上运行良好。

但是，当托管在 pythonanywhere.com 和 JavaScript 控制台上时，我的应用程序无法获取此源，浏览器中的控制台闪烁以下错误： "google not defined"

有没有办法在 pythonanywhere.com 上使用 Google 图表 API？

<!DOCTYPE html>
    <!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{=T.accepted_language or 'en'}}"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge{{=not request.is_local and ',chrome=1' or ''}}">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{=response.title or request.application}}</title>
        <meta name="application-name" content="{{=request.application}}">
        <meta name="google-site-verification" content="">
        <!-- include stylesheets -->
    </head>

    <body>

    <input type="hidden" name="temp" id="temp" />
    <form action="">
        <table>
            <tr>
                <td><select class="form-control" style="width: 200px" name="subjects_tab1" id="subjects_tab1" onchange="tab1_js(this.value);jQuery('#temp').val(document.getElementById('subjects_tab1').value);ajax('{{=URL('default','dd')}}',['temp'],'question');get_comments(this.value)">
            <option name="" value="" id="0"></option>
            {{for s in subjects:}}
            <option name="{{=s.id}}" id="{{=s.id}}" value="{{=s.id}}">{{=s.course_name}}</option>
            {{pass}}
            </select></td>
                <td>
                    <select class="form-control" style="width: 900px" name="question" id="question" onchange="check(jQuery('#question').val())">
                    </select>
                </td>
            </tr>
        </table>
    </form>

    <div id="HD" hidden>Hi</div>
    <div id="HD1" hidden></div>
    <div id="HD2" hidden></div>
    <br /><div id="HD3" hidden></div><br />
    <br /><div id="HD4" hidden></div><br />
    <input id="id1" name="id1" value="" type="hidden"/>
    <input type="hidden" id="err" name="err" ></input>

    <div id="chart" ></div>
    <div id="completed" style="width:400px; margin:0 auto;"></div>

    </body>
    </html>



    <script src="http://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        var data="",data2="";
        var dict;
        var total_data;
        var que_wise_data=[];
        var temperory = new Array(2);
        var progress = new Array(2);
        for(i=0;i<2;i++)
        {
            progress[i] = new Array(2);
        }
        var percent;
        function tab1_js(str)   /* Ajax function to get data from the controller */
        {
            if(str=="")
            {
                document.getElementById('HD').innerHTML = "Hi";
                document.getElementById('chart').innerHTML = "";
                document.getElementById('comments_list').innerHTML = "";
                document.getElementById('completed').innerHTML = "";
                return;
            }
            str = JSON.stringify({"id1":str});
            var hr = new XMLHttpRequest();
            hr.open("POST","tab1_con",true);
            hr.setRequestHeader("Content-type", "application/json");
            hr.onreadystatechange = function(){
                if(hr.readyState==4 && hr.status==200){
                data = hr.responseText;
                document.getElementById('HD').innerHTML = data;
                make_arrays();
                }
            };
            hr.send(str);
        }
        function make_arrays()  /* Function to make javascript objects from JSON string retrieved from the controller */
        {
            main_array = data.split("~");
            //alert(typeof main_array[1]);
            dict = JSON.parse(main_array[0]);
            total_data = JSON.parse(main_array[1]);
            document.getElementById('HD1').innerHTML = total_data[2];
            que_wise_data=[];
            for(i=2; i<main_array.length-1; i++)
            {
                que_wise_data[i-2] = JSON.parse(main_array[i]);
            }
            //document.getElementById("HD1").innerHTML = main_array[main_array.length-1];
            temperory = (main_array[main_array.length-1]).split("/");
            if(temperory[1]!=0)
            {percent=(temperory[0]/temperory[1])*100;}
            else
            {percent=0}
            giveMeter(percent);
            report(total_data);
        }
        function report(total_data)    /* Function to make javascript array from JSON string retrieved from the controller to make Column Chart */
          {
            var overall_report = new Array(total_data.length+1)
            for(i=0; i<=total_data.length; i++)
            {
                overall_report[i] = new Array(2);
            }
            overall_report[0][0]="Attribute";
            overall_report[0][1]="Score";
            for(i=0; i<total_data.length; i++)
            {
            var temp_arr = JSON.stringify(total_data[i]);
            var arr = JSON.parse(temp_arr);
                overall_report[i+1][0]=arr[0];
                overall_report[i+1][1]=arr[1];
            }
            document.getElementById('HD3').innerHTML = overall_report;
            drawColumnChart(overall_report);
        }
        function que(temp)      /* Function to make javascript array from JSON string retrieved from the controller to make Pie Chart */
          {
            var que_report = new Array(temp.length+1)
            for(i=0; i<=temp.length; i++)
            {
                que_report[i] = new Array(2);
            }
            que_report[0][0]="Option";
            que_report[0][1]="Score";
            for(i=0; i<temp.length; i++)
            {
            var temp_arr = JSON.stringify(temp[i]);
            var arr = JSON.parse(temp_arr);
                que_report[i+1][0]=arr[0];
                que_report[i+1][1]=arr[1];
            }
            document.getElementById('HD4').innerHTML = que_report;
            drawPieChart(que_report);
          }
        google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
        google.charts.setOnLoadCallback(drawColumnChart);
        function drawColumnChart(table) 
        {
          var data = google.visualization.arrayToDataTable(table);  /* JavaScript Console in browser shows error for this line: "google not defined" */
          var view = new google.visualization.DataView(data);
          var options = {
            title: "Overall Attribute-wise Analysis",
            width: 900,
            height: 500,
            vAxis: {format: 'percent'},
            minValue: 0,
            maxValue: 100,
            bar: {groupWidth: "95%"},
            legend: 'bottom',
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
          chart.draw(view, options);
      }
      function check(i)
          {
              if(i==0)
              {
                  report(total_data);
              }
              else
              {
                  que(que_wise_data[dict[i]]);
              }
          }
          google.charts.setOnLoadCallback(drawPieChart);
          function drawPieChart(table) {
            var data = google.visualization.arrayToDataTable(table);

            var options = {
              title: 'Question-wise Analysis',
              legend: 'bottom',
            };

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

            chart.draw(data, options);
          }
          google.charts.setOnLoadCallback(drawMeter);
          function giveMeter(p)
          {
              progress[0][0]="Label";
              progress[0][1]="Value";
              progress[1][0]=" ";
              progress[1][1]=p;
              drawMeter(progress);
          }
          function drawMeter(table) {
            var data = google.visualization.arrayToDataTable(table);
            var options = {
              width: 360, height: 360,
              greenFrom: (0.8*100), greenTo: (100),
              yellowFrom:(0.5*100), yellowTo: (0.8*100),
              redFrom:0, redTo:(0.5*100),
              minorTicks: 5,
              max: 100,
            };
            var chart = new google.visualization.Gauge(document.getElementById('completed'));
            chart.draw(data, options);
            }
    </script>

Answer 1

Google 图表都是客户端的，因此 PythonAnywhere 不会阻止它工作。但是，您的服务器端代码可能表现不同，并且返回的值是您的 javascript 未正确处理的。确保您的 ajax 请求正在从服务器获取他们期望的数据。

Google 图表 API 无法在 pythonanywhere.com 上上传的 web2py 应用程序上运行

Google Charts API not working on web2py application uploaded on pythonanywhere.com

python

web2py

google-visualization