在ajax调用之后谷歌图表没有绘制-Java 学习之路

我有一个显示许多Google Charts的时间表 .

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

http://CappedIn.com为确切的例子 . 看到许多图表成功渲染 . 并看到底部和"Load More" . 在"Load More"之后，图表不会渲染 .

使用调试器，我看到 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调用绘制图表的任何想法？

1 回答

我将数据重新加载到谷歌数据表，将数据包打包到谷歌图表视图，并使用视图显式重绘图表 .

// 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); 
    }
});

});

回复于 2024-04-25T17:43:03+08:00

在ajax调用之后谷歌图表没有绘制

1 回答

相关问题