如何从button onclick事件启动fancybox来绘制google图表？

问题描述

我们可以在弹出的窗口中绘制一个google图表吗？

我有一个表格中显示的数据，每行都有一个按钮用于显示google图表

目前，我的图表总是显示在表格的底部，但当记录在屏幕上滚动时，用户需要滚动到底部图表视图。
是否可以使用fancybox或某种方式解决这个不便？

感谢任何建议！

html：

 < table> 
< tr> 
< td>数据< / td> 
 ... 
< td> 
< button onclick =showChartByEmpId（）>饼图< / button> 
< / td> 
< / tr> 
 
< / table> 
 
< div class =secondary> < / div> <！ - 显示图表 - > 
  

js：

 code> function drawPieChart（dataArr，elementId）{
 // dataArr：要显示的数据
 // elementId：< div>元素在其中显示图表
 
 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）; 
 
 ...准备pieChartDate []来绘制图表... 
 
 //创建< div>显示图表
 $（'。secondary'）。html（'< div id =chart_divheight =450width =450>< / div>'） 
 drawPieChart（pieChartData [0]，chart_div）; 
 ... 
 
} 
 
 
函数showChartByEmpId（）{
 
 var url ='/ CMP / employee / emp.do'; 
 
 //创建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）; 
} 
  

解决方案

/ p>

1）。隐藏 .secondary div

 < div class = style =display：none>< / div> 
  

2）。为每个按钮分配类选择器

 < button class =doPiechart> pie图表< / button> 
  

3）。绑定单击事件到每个按钮，然后显示 #chart_div in fancybox after was created。

  jQuery（function（$）{
 $（。doPiechart ）.each（function（i）{
 $（this）.on（click，function（）{
 showChartByEmpId（i）; 
 $ .fancybox（＃chart_div ）; 
}）; // on click 
}）; // each 
}）; 
  

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

在 中查看模拟行为使用

注： .on（）需要jQuery v1.7 +

Can we draw a google chart in a pop up fancybox?

I have data shown in a table, and there is a button in each row for showing google chart of each record.

Currently, my chart is always shown in the bottom after the table, but when the record is scroll over the screen, user need scroll to bottom to get the chart view. Is it possible to use fancybox or some way solving this inconvenient?

Thanks for any advise!

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

解决方案

What I would do :

1). hide the .secondary div

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

2). assign a class selector to each button like

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

3). bind a click event to each button and then show the contents of #chart_div in fancybox after is created.

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

Notice that you may need to tweak your showChartByEmpId() function to pass the index of the .each() method and eventually to include a callback to show fancybox after is completed.

See a simulated behavior in JSFIDDLE using fancybox v2.x

NOTE: .on() requires jQuery v1.7+

这篇关于如何从button onclick事件启动fancybox来绘制google图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！