以下是我的代码:

<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load("visualization", "1", {packages:["table"]});

var table = new google.visualization.Table(document.getElementById('chart_div'));

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawTable);
var jsonData = ${requestScope.jsonData};

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var view = new google.visualization.DataView(data);

var addButton = document.getElementById('add');
var removeButton = document.getElementById('remove');

function drawTable() {
  table.draw(view);
}

removeButton.onclick=function(){
    view.hideColumns([1]);
    drawTable();
}

drawTable();

</script>
</head>


当我在drawTable()函数中包含以下几行时,它可以工作,而将它们放在外面(如上面的代码)不起作用。

var jsonData = ${requestScope.jsonData};

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var view = new google.visualization.DataView(data);


我想将它们留在外面的原因是因为我试图从另一个函数访问var视图,该函数将在单击按钮时隐藏视图的列。

谢谢您提前提供的所有帮助。

最佳答案

google.setOnLoadCallback(drawTable);的主要目的是避免在库加载之前调用google api的函数,因为该库是由异步加载的。因此,无论何时使用api,它都应始终位于drawTable()函数内部或该函数之后运行的其他位置。

为了能够在drawTable()之外使用数据,您只需要在外部创建var,然后在内部修改它:

var view = null;
var table = null;

function drawTable(){
    //your code...
    var table = new google.visualization.Table(document.getElementById('chart_div'));
    //your code...
    var view = new google.visualization.DataView(data);
    //your code...
}


然后您可以执行以下操作:

removeButton.onclick=function(){
    if(view != null && table != null){
        view.hideColumns([1]);
        table.draw(view);
    }
}

07-26 02:30