Question

我必须使用2个不同的sql查询数据绘制并排表。我发送给定的以下格式。但是，它将第一个查询数据绘制到第二个表容器中，而不是第一个表容器。

 var sqlQuery = "sql?tq=select Section, SubSection, Id, Question, Answer, Others where " +
                                        "SubSection = '1.1' &sqlQueryID=questions_bank";
                        var query1 = new google.visualization.Query(sqlQuery);
                        TABLE_LOCATION = 'tableProductDeploymentContainer';
                        query1.send(drawQuestions);
                        var sqlQuery = "sql?tq=select Section, SubSection, Id, Question, Answer, Others where " +
                                       "SubSection = '1.2' &sqlQueryID=questions_bank";
                        var query2 = new google.visualization.Query(sqlQuery);
                        TABLE_LOCATION = 'tableProductDeploymentContainer';
                        query2.send(drawQuestions);
                        break;

function drawQuestions(queryResponse) {
            if (queryResponse.isError()) {
                alert('Error in query: ' + queryResponseData.getMessage() + ' ' + queryResponseData.getDetailedMessage());
                return;
            }
            var questionBankResponse = queryResponse.getDataTable();
            if (questionBankResponse === null) {
                alert('Empty rows in query: ' + questionBankResponse.getNumberOfRows());
                return;
            }
            var questionDataTable = new google.visualization.DataTable();
            questionDataTable.addColumn('string', '');
            questionDataTable.addColumn('string', '');
            questionDataTable.addColumn('string', '');
            var questionDataTableRow = new Array();
            var rowCounter;
            for (rowCounter = 0; rowCounter < questionBankResponse.getNumberOfRows() ; rowCounter++) {
                var count = 0 * 1;
                var chbQuestion;
                var questionId = questionBankResponse.getValue(rowCounter, 2);
                var questionName = questionBankResponse.getValue(rowCounter, 3);
                var answerValue = questionBankResponse.getValue(rowCounter, 4);
                var answerOthers = questionBankResponse.getValue(rowCounter, 5);
                if (answerOthers !== null)
                    answerOthers = answerOthers.toString();
                if (answerValue === null)
                    answerValue = 0;
                if (answerValue.toString() === "1")
                    chbQuestion = "<input type=\"checkbox\"" + " id=\"" + questionId + "\"" + " checked />";
                else
                    chbQuestion = "<input type=\"checkbox\"" + " id=\"" + questionId + "\"" + " />";
                questionDataTableRow[count++] = chbQuestion;
                questionDataTableRow[count++] = questionName;
                questionDataTableRow[count++] = answerOthers;
                questionDataTable.addRow(questionDataTableRow);
            }
            var tableObject = new google.visualization.Table(document.getElementById(TABLE_LOCATION));
            tableObject.draw(questionDataTable, { allowHtml: true, 'cssClassNames': cssClasses, width: '100%', sort: 'disable' });
        }

我相信，设置TABLE_LOCATION全局变量时会出现一些错误。有没有办法动态传递表容器而不在全局级别维护。

感谢您的帮助。

Answer 1

因为Query.send的回调是异步调用的，所以不能保证一个人完成另一个

正如您所指出的那样，在回调中发送表ID，而不是使用全局范围...

请参阅以下摘录...

var sqlQuery = "sql?tq=select Section, SubSection, Id, Question, Answer, Others where " +
               "SubSection = '1.1' &sqlQueryID=questions_bank";
var query1 = new google.visualization.Query(sqlQuery);

query1.send(function (queryResponse) {
  drawQuestions(queryResponse, 'tableProductDeploymentContainer');
});

var sqlQuery2 = "sql?tq=select Section, SubSection, Id, Question, Answer, Others where " +
               "SubSection = '1.2' &sqlQueryID=questions_bank";
var query2 = new google.visualization.Query(sqlQuery2);

query2.send(function (queryResponse) {
  drawQuestions(queryResponse, 'tableProductDeploymentContainer2');
});

function drawQuestions(queryResponse, TABLE_LOCATION) {
    if (queryResponse.isError()) {
        alert('Error in query: ' + queryResponseData.getMessage() + ' ' + queryResponseData.getDetailedMessage());
        return;
    }
    var questionBankResponse = queryResponse.getDataTable();
    if (questionBankResponse === null) {
        alert('Empty rows in query: ' + questionBankResponse.getNumberOfRows());
        return;
    }
    var questionDataTable = new google.visualization.DataTable();
    questionDataTable.addColumn('string', '');
    questionDataTable.addColumn('string', '');
    questionDataTable.addColumn('string', '');
    var questionDataTableRow = new Array();
    var rowCounter;
    for (rowCounter = 0; rowCounter < questionBankResponse.getNumberOfRows() ; rowCounter++) {
        var count = 0 * 1;
        var chbQuestion;
        var questionId = questionBankResponse.getValue(rowCounter, 2);
        var questionName = questionBankResponse.getValue(rowCounter, 3);
        var answerValue = questionBankResponse.getValue(rowCounter, 4);
        var answerOthers = questionBankResponse.getValue(rowCounter, 5);
        if (answerOthers !== null)
            answerOthers = answerOthers.toString();
        if (answerValue === null)
            answerValue = 0;
        if (answerValue.toString() === "1")
            chbQuestion = "<input type=\"checkbox\"" + " id=\"" + questionId + "\"" + " checked />";
        else
            chbQuestion = "<input type=\"checkbox\"" + " id=\"" + questionId + "\"" + " />";
        questionDataTableRow[count++] = chbQuestion;
        questionDataTableRow[count++] = questionName;
        questionDataTableRow[count++] = answerOthers;
        questionDataTable.addRow(questionDataTableRow);
    }
    var tableObject = new google.visualization.Table(document.getElementById(TABLE_LOCATION));
    tableObject.draw(questionDataTable, { allowHtml: true, 'cssClassNames': cssClasses, width: '100%', sort: 'disable' });
}

谷歌可视化：如何使用表调用和绘制顺序查询？

1 个答案: