Javascript 使用GoogleGraphsAPI处理动态数据_Javascript_Jquery_Ajax_Google Analytics_Google Visualization

Javascript 使用GoogleGraphsAPI处理动态数据

javascript jquery ajax google-analytics google-visualization

Javascript 使用GoogleGraphsAPI处理动态数据,javascript,jquery,ajax,google-analytics,google-visualization,Javascript,Jquery,Ajax,Google Analytics,Google Visualization,刚刚从Google Analytics服务中为我的管理仪表板获取了一些数据。这是发送到浏览器时的格式（JSON编码）然后我想通过JavaScript在图表中显示它。我的代码如下： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/

刚刚从Google Analytics服务中为我的管理仪表板获取了一些数据。这是发送到浏览器时的格式（JSON编码）

然后我想通过JavaScript在图表中显示它。我的代码如下：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
$.get("api.php", function(response, status){

t = [];
response = JSON.parse(response);
            for (var i = 0; i < response.length; i++) {
                t[i] = [response[i][0], response[i][1]];
            }
});

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

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
$.get（“api.php”，函数（响应、状态）{
t=[]；
response=JSON.parse（response）；
对于（变量i=0；i


我什么也没得到。该图根据文档中的内容进行了改编。由于某种原因，响应似乎不是有效的数组，因此我需要额外的循环，尽管这会带来一个空白页，但没有错误。如果我硬编码，它就会工作。有人知道会有什么问题吗
**最新代码**
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart()
{
    $.ajaxSetup({
        cache: false,
    });

    $.get("api.php", function(response, status)
    {
        t = [];
        response = JSON.parse(response);
                for (var i = 0; i < response.length; i++)
                    t[i] = [response[i][0], response[i][1]];

        alert(response);
    });

        var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        response,
    ]);

    //data.addColumn('string', 'Employee Name');
    //data.addColumn('string', 'Employee Name123');

    var options = {
        title: 'Company Performance',
        hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
        vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
}
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）
{
$.ajaxSetup({
cache:false，
});
$.get（“api.php”，函数（响应、状态）
{
t=[]；
response=JSON.parse（response）；
对于（变量i=0；i
刚刚注意到第二列被编码为字符串，

并且需要转换为一个数字，

在创建数据表之前
请参阅以下工作片段

google.charts.load（'current'{
回调：图纸，
软件包：['corechart']
});
函数绘图图（）{
“20161209，”15“，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，“20161210”，“2”，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，[“20161225”，“0”]，[“20161226”,"0"],["20161227","0"],["20161228","0"],["20161229","1"],["20161230","4"],["20161231","2"],["20170101","1"],["20170102","1"],["20170103","4"],["20170104","0"],["20170105","2"],["20170106","4"],["20170107","0"],["20170108","0"],["20170109","0"],["20170110","0"],["20170111","0"],["20170112","0"],["20170113","0"],["20170114","0"],["20170115","0"]];
var chartData=[]；
push（['Name'，'Number']）；
data.forEach（函数（行）{
push（[row[0]，parseFloat（row[1]））；
});
var dataTable=google.visualization.arrayToDataTable（chartData）；
变量选项={
标题：“公司业绩”，
hAxis:{title:'Year'，titleTextStyle:{color:'#333'}}，
变量：{minValue:0}
};
var chart=new google.visualization.AreaChart（document.getElementById（'chart_div'））；
图表绘制（数据表、选项）；
}

在加载数据行之前尝试添加一行列标题——控制台中有错误吗？现在刚刚尝试过。。。使用“t”数组时，我遇到以下错误：CrossPageChannel:无法连接，对等窗口对象未设置第775行错误：CustomError:受保护函数中的错误：加载时的配置错误行：215错误：使用“response”后不是数组，我只得到最后一个错误一次。上面讨论的最新代码OK，现在直接创建一个新的DataTable，而不是不向ArrayToDataTable传递任何内容。由于某种原因，尽管在使用alert（）时数据会出现，但后来我得到一个“响应”是未定义的错误？？请再次输入上面的最新代码。
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart()
{
    $.ajaxSetup({
        cache: false,
    });

    $.get("api.php", function(response, status)
    {
        t = [];
        response = JSON.parse(response);
                for (var i = 0; i < response.length; i++)
                    t[i] = [response[i][0], response[i][1]];

        alert(response);
    });

        var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        response,
    ]);

    //data.addColumn('string', 'Employee Name');
    //data.addColumn('string', 'Employee Name123');

    var options = {
        title: 'Company Performance',
        hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
        vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
}
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>