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

我们可以在弹出的 fancybox 中绘制谷歌图表吗？

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

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

感谢您的任何建议！

html:

<table>
   <tr>
      <td> data </td>
      ...
      <td>
        <button onclick="showChartByEmpId()"> pie chart </button>
      </td>
   </tr>

</table>

<div class="secondary"> </div>  <!-- showing chart here -->

js:

function drawPieChart(dataArr, elementId) {
    //dataArr : the data to display
    //elementId : <div> 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 <div> to displaying chart in it    
            $('.secondary').html('<div id="chart_div" height="450" width="450"></div>');
            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);
}

我会做什么：

1).隐藏.secondary div

<div class="secondary" style="display:none"></div>

2）。分配一个class每个按钮的选择器就像

<button class="doPiechart">pie chart</button>

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

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

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

查看模拟行为JSFIDDLE http://jsfiddle.net/AJa5z/ using fancybox v2.x http://fancyapps.com/fancybox/

NOTE: .on()需要 jQuery v1.7+