Question

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

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

目前，我的图表始终显示在表格后面的底部，但是当记录在屏幕上滚动时，用户需要滚动到底部才能获得图表视图。是否可以使用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事件绑定到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。< / p>

使用JSFIDDLE

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

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

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

1 个答案: