2

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

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

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

1 回答 1

2

我会做什么：

1）。隐藏.secondarydiv

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

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

<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
});

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

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

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

于 2013-09-02T22:44:26.927 回答