Question

我想在Ajax成功后加载Google折线图（自适应）。我试图将整个Google Chart代码放入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;
}

Answer 1

首先，您使用的是旧版的Google图表。
# Converting set to list may not be needed but I don't remember for sure :) Building.objects.filter(pk__in=list(important_buildings))...应该不再使用，请参阅update library loader code。

需要改用以下库...

jsapi

这只会更改<script src="https://www.gstatic.com/charts/loader.js"></script>语句。

谈到load语句，
它将默认等待页面加载，
这样您就可以代替...

load和$( window ).on( "load"...等...

推荐类似于以下内容的设置...

$(document).ready

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

1 个答案: