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

Question

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

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

目前，我的图表始终显示在表格后面的底部，但是当记录滚动到屏幕上时，用户需要滚动到底部才能获取图 TableView 。是否可以使用 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);
}

Answer 1

我会做什么:

1).隐藏 .secondary div

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

2).为每个按钮分配一个类选择器，例如

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

3).将click事件绑定(bind)到每个按钮，然后在创建后在fancybox中显示#chart_div的内容。

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

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

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

注意:.on() 需要 jQuery v1.7+