我有一个显示许多 Google 图表的时间线。
当您点击主页时，所有 Google 图表都会正确加载并显示。但是，时间线底部有一个“加载更多”。不会绘制由此“加载更多”生成的图表。
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 项目并不重要。
关于为什么不通过“加载更多”调用绘制图表有什么想法吗？
最佳答案
我将数据重新加载到 Google 数据表中，将该数据表打包到 Google 图 TableView 中，并使用该 View 显式地重新绘制图表。
// 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);
}
});
});
关于javascript - ajax 调用后 Google 图表不绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39351977/