Question

如何在点击事件后绘制数据表？我有下一个js代码：

function drawDataTable() {

var options = {'showRowNumber': true};
var query = new google.visualization.Query($('#connection_spreadsheet_url').val());


function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();
    (new google.visualization.Table($('#table')[0])).draw(data, options);
}

function sendAndDraw() {
    query.send(handleQueryResponse);
}

google.setOnLoadCallback(sendAndDraw);

}

它的工作正常，但我只想在点击按钮后绘制数据表（例如 $（＆＃39;＃button＆＃39;））

Answer 1

替换此行：

google.setOnLoadCallback(sendAndDraw);

有这样的事情：

google.setOnLoadCallback(function () {
    $('#button').click(sendAndDraw);
});

这可确保在您尝试使用任何组件之前加载API。您可能希望最初禁用该按钮并在回调运行时启用它，因此用户没有＆＃34;我点击了此按钮并且没有发生任何事情＆＃34;问题（如果API加载缓慢）。

Answer 2

这样的东西？ http://jsfiddle.net/9Rawe/我知道它不是一个数据表，但它的工作方式与所有Google可视化方法的工作方式基本相同

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1', {
                'packages': ['corechart'],
                "callback": drawChart
            });
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Year', 'Sales', 'Expenses'],
                    ['2004', 1000, 400],
                    ['2005', 1170, 460],
                    ['2006', 660, 1120],
                    ['2007', 1030, 540]
                ]);

                var options = {
                    title: 'Company Performance'
                };

                $("#button").click(function() {
                    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                    chart.draw(data, options);
                });
            }
        </script>
    </head>
    <body>
        <input type="submit" value="Display Chart" id="button" />
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
    </body>
</html>

点击事件后如何绘制google.visualization.datatable？

2 个答案: