使用动态数据在 Ajax 成功后填充 Google 图表

Question

使用动态数据在 Ajax 成功后填充 Google 图表

javascriptphpjqueryajaxgoogle-visualization

4

我希望在Ajax成功后加载一个响应式的Google折线图。我尝试将整个Google图表代码放在Ajax调用的Success部分中，但是没有效果。下面是我的Ajax代码：

$( window ).on( "load", function() {
        $.ajax({
            url: url,
             headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            type: "POST",
            data: {
                'annual_capital_growth':annual_capital_growth,
                'property': property,
                'forcast_period': forcast_period,
            },
            context: this,
            success:function(data) {
                console.log(data.graphArray); /*This is where I inserted Google Charts Code*/

            },
            error: function(errorThrown){
                console.log(errorThrown);
            }
        });
    });

现在我的Google图表代码是这样的：

请注意，我的代码是响应式的，底部有一些额外的功能用于窗口调整大小。

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

function drawBackgroundColor() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Years');

  data.addColumn('number', 'Property Name'); 
  data.addColumn('number', 'Compute Times');
  data.addColumn('number', 'Compute Times2'); /*This is where I want to insert Ajax Data*/

  console.log("--");
  data.addRows([
    ['2018', 200000, 210000, 220000], 
    ['2019', 210000, 220000, 220000],
    ['2020', 220000, 250000, 220000], /*This is where I want to insert Ajax Data*/
  ]); 
  console.log(data);
  var options = {
    height: 350,
    legend: {
      position: 'bottom'
    },
    hAxis: {
      title: 'Years'
    },
    vAxis: {
      title: 'Property Value'
    },
    backgroundColor: '#f1f8e9'
  };

  function resize() {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
  window.onload = resize();
  window.onresize = resize;
}

- Anup Gupta

什么不起作用？它显示任何错误吗？请更具体一些。 - Muhammad Adistya Azhar

实际上，在控制台中我没有收到任何错误信息，页面只是变成了一个空白的白色页面。 - Anup Gupta

你得到了什么回应？ - Muhammad Adistya Azhar

什么都没有，但现在我通过朋友的帮助稍微改了一下代码，现在它可以工作了。 - Anup Gupta

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WhiteHat · Accepted Answer

首先，您正在使用旧版的Google Charts。不应再使用jsapi，请参见更新库加载器代码。

需要使用以下库代替...

<script src="https://www.gstatic.com/charts/loader.js"></script>

这将只改变load语句。

说到load语句，它默认会等待页面加载完毕，所以你可以使用它来代替$( window ).on( "load"...和$(document).ready等等。

建议设置类似以下的方式...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var options = {
    height: 350,
    legend: {
      position: 'bottom'
    },
    hAxis: {
      title: 'Years'
    },
    vAxis: {
      title: 'Property Value'
    },
    backgroundColor: '#f1f8e9'
  };

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

  $.ajax({
    url: url,
    headers: {
      'X-CSRF-TOKEN': '{{csrf_token()}}'
    },
    type: "POST",
    data: {
      'annual_capital_growth':annual_capital_growth,
      'property': property,
      'forcast_period': forcast_period,
    },
    context: this
  }).done(function (response, status, jqXHR) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Years');
    data.addColumn('number', 'Property Name');
    data.addColumn('number', 'Compute Times');
    data.addColumn('number', 'Compute Times2');
    data.addRows(response.graphArray);

    function resize() {
      chart.draw(data, options);
    }
    resize();
    $(window).resize(resize);
  }).fail(function (jqXHR, status, errorThrown) {
    console.log(errorThrown);
  });
});