ajax调用后谷歌图表不绘制答案

【问题标题】：Google charts not drawing after ajax callsajax调用后谷歌图表不绘制
【发布时间】：2016-09-06 14:49:58
【问题描述】：

我有一个显示许多 Google 图表的时间线。

当您点击主页时，所有 Google 图表都会正确加载并显示。但是，时间线底部有一个“加载更多”。此Load More生成的图表未绘制。

http://CappedIn.com 是一个确切的例子。看到许多图表成功渲染。并查看底部和“加载更多”。在“加载更多”之后，图表不会呈现。

使用调试器，我看到drawChart 没有被调用。 google.setOnLoadCallback(drawChart); 似乎没有被调用。

这个加载更多调用完全相同的代码来绘制图表。这是在构建时间轴时执行的部分代码。以下代码包含在页面上显示的每个图表中。

    google.load("visualization", "1", {packages:["corechart"]});

    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable(#{get_line_movement_data(line_movement.event,chart_type)});
      var options = {"title":"#{chart_title}","colors":["#0088cc"]};
      var chart = new google.visualization.LineChart(document.getElementById("line-movement-#{chart_type}-#{line_movement.id}"));
      debugger;
      chart.draw(data, options);
    }

此代码通过按“加载更多”被调用，并包含在原始页面加载中。

  $(document).ready(function () {
    // when the load more link is clicked
    $('a.load-more').click(function (e) {
        // prevent the default click action
        e.preventDefault();

        // hide load more link
        $('.load-more').hide();

        // show loading gif
        $('.loading-gif').show();

        // get the last id and save it in a variable 'last-id'
        var last_position = $('.record').last().attr('data-position');
        // make an ajax call passing along our last user id
        $.ajax({

            // make a get request to the server
            type: "GET",
            // get the url from the href attribute of our link
            url: $(this).attr('href'),
            // send the last id to our rails app
            data: {
                feed_item_position: last_position
            },
            // the response will be a script
            dataType: "script",

            // upon success 
            success: function () {
                // hide the loading gif
                $('.loading-gif').hide();
                // show our load more link
                $('.load-more').show();
            }
        });

    });
  });

我当然会在<head> 中加载 Google Charts js。

= javascript_include_tag "//www.google.com/jsapi", "chartkick"

Ruby on Rails 项目并不重要。

关于为什么不使用 Load More 调用绘制图表的任何想法？

【问题讨论】：

对于任何查看此内容的人...在此处添加 true 作为参数解决了整个问题...不知道为什么！ google.setOnLoadCallback(drawChart,true);

标签： javascript jquery google-visualization chartkick

【解决方案1】：

我将数据重新加载到 google 数据表中，将该数据表打包到 google 图表视图中，然后使用该视图显式重绘图表。

 // when the load more link is clicked
$('a.load-more').click(function (e) {
// prevent the default click action
e.preventDefault();

// hide load more link
$('.load-more').hide();

// show loading gif
$('.loading-gif').show();

// get the last id and save it in a variable 'last-id'
var last_position = $('.record').last().attr('data-position');
// make an ajax call passing along our last user id
$.ajax({

    // make a get request to the server
    type: "GET",
    // get the url from the href attribute of our link
    url: $(this).attr('href'),
    // send the last id to our rails app
    data: {
        feed_item_position: last_position
    },
    // the response will be a script
    dataType: "script",

    // upon success 
    success: function ( data ) { 
        // hide the loading gif
        $('.loading-gif').hide();
        // show our load more link
        $('.load-more').show();


        // get a reference to the line chart
        var chart = window.chartGoogleLineChart;

        // build a new google datatable with the data
        var dt = new google.visualization.DataTable(data);


        var view = new google.visualization.DataView(dt);
        chart.formatView(chart, view);

        chart.draw(view, true); 
    }
});

});

【讨论】：

今天晚些时候会试一试:)
按下“加载更多”按钮后会绘制很多图表。会不会有冲突？
没有。我在页面上平铺了图表。每个图表将独立重绘数据。如果您传递动画参数，图表将为数据更改设置动画。
你有成功的代码： - 以前成功只显示加载 gif。我没有成功绘制图表的所有数据。绘制图表的数据被传递到一个部分。我在上面的第一个代码块中有那个部分。部分包含每个图表的数据。使用每个图表的数据多次调用部分。
无论在哪里找到数据，这些步骤都保持不变。获取json数据。使用 google.visualization.DataTable 从 json 数据创建一个 google 数据表。将 google 数据表包装在视图中。获取页面上图表的引用并调用 draw ... 将图表传递给 draw 函数中的视图。