我正在尝试使用 jQuery 使用从服务器返回的值来绘制条形图。我使用以下代码，
我尝试使用变量data_list中的值绘制图表，问题是图表首先使用空值绘制，而我从服务器获取了值。
我是 Javascript 和 jQuery 的新手。提前致谢。
<html>
<head>
<title>the title</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker();
$( "#datepicker2" ).datepicker();
});
</script>
<script type="text/javascript" language="javascript">
var data_list
$(document).ready(function() {
$.get('/api/', function(data) {
data_list = data;
alert(data_list); // alert work second
});
});
alert('test') // first this alert work
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(data_list);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<form>
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
</form>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
最佳答案
JS 代码中有两部分。第一个是使用 AJAX 请求从 API 加载图表数据。第二个启动图表库并附加此行中的数据:
var data = google.visualization.arrayToDataTable(data_list);
问题是 ajax 请求是异步的，当您附加该数据时，数据尚未加载。 data_list var 在 AJAX 请求完成时可用，而不是在页面加载时可用。换句话说，您必须将图表的初始化和附加到图表的数据分开，或者简单地说:初始化图表、加载数据并在 AJAX 请求完成时将其设置到图表。您的代码(未经测试)的一个简单示例可能是:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
$(document).ready(function() {
$.get('/api/', function(data) {
data_list = data;
var data = google.visualization.arrayToDataTable(data_list);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
}
请记住，此代码未经测试，它说明了正确初始化的想法: - 加载谷歌图表库 - 加载数据 - 数据加载后，初始化具体图表
异步加载给代码增加了一些复杂性，但它是使用 AJAX 和 DOM 事件进行 JavaScript 编程的基础。另一种更易读且更简单的选择是使用 jquery 延迟对象和 promise 。有关延迟和 promise 的更多信息: -http://api.jquery.com/category/deferred-object/ -http://www.html5rocks.com/en/tutorials/es6/promises/?redirect_from_locale=es
关于javascript - 使用javascript绘制条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22829622/