谷歌可视化API多个图表数据显示在错误的图表
JavaScript Google Visualisation API Multiple Charts Data Displayed in Wrong Graph
所以我正在用HTML构建一个基本的仪表板,并使用谷歌的可视化API来实现。我需要创建许多图形和下面的代码工作得很好。除了一个问题:数据本身似乎是随机归于图表的。每当我重新加载页面时,图形就会切换显示的数据。
我试图通过与其他数组一起创建dataArray来解决这个问题,但这并没有解决问题-必须有某种方法将数据直接属性到查询中的图表中。谢谢!
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {packages: ['corechart']});
// Set a callback to run when the Google Visualization API is loaded
google.charts.setOnLoadCallback(function() {
drawChart('chart1', 0, 'SELECT A, B, C, D, E, G OFFSET 1', 'Sheet1',
{ title: 'Chart 1'}
)
drawChart('chart2', 1, 'SELECT A, I OFFSET 1', 'Sheet1',
{ title: 'Chart 2' }
)
});
var chartsArray = [];
var optionsArray = [];
var nextID = 0;
function drawChart(tag, id, sqlCommand, sheetName='Sheet1', options= {}, numHeaders=1) {
chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag));
optionsArray[id] = options;
var queryString = encodeURIComponent(sqlCommand);
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString);
query.send(handleDataQueryResponse);
}
function handleDataQueryResponse(response, id) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
data = response.getDataTable();
chartsArray[nextID].draw(data, optionsArray[nextID]);
nextID += 1;
}
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
更新:我已经解决了这个问题(目前,可怕的解决方案)通过调用setTimeout(),从而强制调用可视化API执行在我想要的顺序。
回调函数handleDataQueryResponse
是异步调用的,所以你不能保证一个会在另一个之前完成…
推荐这样的东西…
function drawChart(tag, id, sqlCommand, sheetName='Sheet1', options= {}, numHeaders=1) {
chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag));
optionsArray[id] = options;
var queryString = encodeURIComponent(sqlCommand);
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString);
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
data = response.getDataTable();
chartsArray[id].draw(data, optionsArray[id]);
});
}
相关文章:
- ng消息仅在触摸时显示错误,并在错误的初始显示上转换
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- java脚本的数学方程显示错误的答案
- 如果用户输入的长度小于最小长度,则显示错误消息
- Push方法显示错误
- Javascript设置日期不起作用,显示错误的时间
- 显示错误的Ajax调用无法调试
- 显示错误结果的Javascript
- 分页逻辑显示错误的页码
- 如何显示错误消息
- 表单提交没有'如果为空,则不会显示错误消息
- 使用RecordRTC录制的WebRTC视频在IE和Safari中显示错误
- 如何仅在存在最小值和最大值时才显示错误消息
- AngularJS错误处理:根据错误数组显示错误
- PHP 显示错误的名称值
- 在 api 调用$resource显示错误和成功消息
- 为什么 Angularjs 总是显示错误消息
- 在单选按钮验证中同时显示错误消息
- jQuery'摇动'功能显示错误
- Jquery添加更多和删除冲突并显示错误值