如何从按钮onclick事件启动fancybox来绘制谷歌图表？

我们可以在弹出式花式框中绘制谷歌图表吗？

我在表格中显示了数据，每行都有一个按钮，用于显示每条记录的谷歌图表。

目前，我的图表始终显示在表格后面的底部，但是当记录在屏幕上滚动时，用户需要滚动到底部才能获得图表视图。 有可能使用fancybox或某种方式来解决这个不方便的问题吗？

谢谢你的建议！

HTML：

 ... 
 
 
 data 
  pie chart  
 
 
 
 
  

JS：

 function drawPieChart(dataArr, elementId) { //dataArr : the data to display //elementId : 
 element where to display chart var data = google.visualization.arrayToDataTable(dataArr); var chart = new google.visualization.PieChart(document.getElementById(elementId)); chart.draw(data, options); } function showChart(){ //alert("readyState=" + xhr2.readyState); if(xhr2.readyState == 4) { if(xhr2.status == 200){ var allEmp = xhr2.responseText; var empList = JSON.parse(allEmp); ... prepare pieChartDate[] to draw chart ... //create 
 to displaying chart in it $('.secondary').html('
'); drawPieChart(pieChartData[0], "chart_div"); ... } function showChartByEmpId(){ var url = '/CMP/employee/emp.do'; //create XMLHttpRequest xhr = createXHR(); if( xhr == null ){ alert("no xhr creted"); return; } var requestData = "action=getOneEmpJSON&empId1=" + escape(empId1) + "&empId2=" + escape(empId2); xhr.open('POST', url, true); xhr.onreadystatechange = showChart; xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(requestData); } 

Answer 1

我会怎么做：

1）。 隐藏.secondary div

2）。 为每个按钮指定一个类选择器

 pie chart 

3）。 将click事件绑定到each按钮，然后在创建后在fancybox中显示#chart_div的内容。

 jQuery(function ($) { $(".doPiechart").each(function (i) { $(this).on("click", function () { showChartByEmpId(i); $.fancybox("#chart_div"); }); // on click }); // each }); 

请注意 ，您可能需要调整showChartByEmpId()函数以传递.each()方法的索引，并最终包含一个回调以在完成后显示fancybox。

使用fancybox v2.x查看JSFIDDLE中的模拟行为

注意 ： .on()需要jQuery .on() +