我使用谷歌图表库在我的网页上实现了图形。它通过 AJAX 添加到页面,进入 <div>
.
我想在页面加载时显示图表,为此我写道:
<script type="text/javascript">
window.onload =function()
{
callgraph();
}
</script>
callgraph-我绘制图表的函数。
function callgraph() {
var msg = $('#formx').serialize();
$.ajax({
type: 'POST',
url: '/graph/data',
data: msg,
success: function(data) {
$('#results').html(data);
},
error: function(xhr, str){
// alert('xhr.responseCode);
}
});
}
它可以工作,但有时刷新页面时图表不会加载。 当我在表单中更改数据并调用我的函数时,它总是正常工作。
然后我延迟调用我的函数两次。使用此方法图每次都会出现。
window.onload =function(){
setTimeout(callgraph, 250);callgraph();
}
但我认为调用函数两次并不是好方法。
绘制图表函数
<script type="text/javascript">
google.charts.load('current', {'packages':['line'],callback: drawChart});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Heads');
data.addRows([
<?php
while($row = mysqli_fetch_array($data))
{
echo '[ \''.$row['Date'].'\' , ';
echo $row['HeadCount'].' ],';
}
?>
]);
var options = {
title: '',
height: 640,
vAxis: {
viewWindow: {
min: 0,
}
},
};
var chart = new google.charts.Line(document.getElementById('chart_div'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
你能告诉我该怎么做吗?
最佳答案
我们无法知道来自您的 ajax 请求的代码,但听起来您正在尝试在 google api 完全加载之前绘制图表。请记住,您应该始终使用 api 提供的回调来绘制图表,如下所示:
google.charts.setOnLoadCallback(drawChart);
这可能是图表在超时后加载的原因。
关于javascript - 谷歌图表页面加载时的图形 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49794473/