Question

我有一系列三个按钮，每个按钮都有自己的ID。每个按钮都会激活一个bs模态（相同的模态 - #mymodal）。模态需要显示谷歌图表的关键要求是模式中显示的图表必须依赖于点击的按钮。因此，模式上的Google图表API之后的代码结构是：

    //show ONLY chart 1 if button 1 is clicked
    $(document).ready(function(){
        $("#btn0").click(function(){
        //add chart1 data and options
        //view chart1 in the modal

       });
   });

     //show ONLY chart 2 if button 2 is clicked
     $(document).ready(function(){
      $("#btn1").click(function(){
     //add chart2 data and options
     //view  chart2 in the modal
        });
    });


    //show ONLY chart 3 if button 3 is clicked
    $(document).ready(function(){
    $("#btn2").click(function(){
    //add chart3 data and options
    //view chart3 in the modal
     });
    });

第一次一切正常。 IE单击第一个按钮（＃btn0），模式触发，仅包括图表1。

然而，当我点击按钮2（＃btn1）时，模态再次触发，但包含图表2和不需要的图表1.

当我点击按钮3（＃btn2）时，模态再次激发，但包含不需要的图表1,2，以及想要的图表3.

现在我触发的任何按钮都包含所有三个图表，除非我刷新页面。然后该过程重复进行

我尝试插入.unbind和.off方法：

$("#btn0").unbind("click");
$("#btn0").off("click");

在查看btn0的chart1程序之后。我也尝试了e.stopPropagation（）在同一个位置。没运气。相同的行为。但也许我没有正确使用这些方法

我将不胜感激任何帮助。这似乎只是在点击另一个按钮之前摆脱早期按钮点击所创建的操作。然而，我的2个小时的努力，我担心我没有实现这一点。提前致谢

AS REQUESTED 这是模态调用者。只需包含graph.php - 根据报告的问题加载的页面。

获取报告

        <!-- Modal content-->
                <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Job Log Report - Global</h4>
                        </div>              
                        <div class="modal-body">    
                            <div class="row" style="background-color

                                    <div class="col-sm-8 text-align:center">
                                        <p style="color:darkred">Job Log Graph<br></p>                                                                                  
                                        <?php include "graphs.php"?>
                                    </div>                                      
                        </div>

                        <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close Report</button>
                        </div>
                </div>    
        </div>
    </div>

这是上面模式中包含的graphs.php页面。

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript"> 

  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {          

        $(document).ready(function(){
            $("#btn0").click(function(){
                        // Create the data table col headings or pie segment headings
                        var data1 = new google.visualization.DataTable();
                        data1.addColumn('string', 'abc');
                        data1.addColumn('number', 'Number of Jobs');
                        data1.addRows
                        ([                            
                            DATA
                        ]);

                    // Set chart options
                        var options1 = {'title':'Global Jobs - By Status',
                                       'width':700,
                                       'height':300};

                    // Instantiate and draw our chart, passing in some options.
                        var chart1 = new google.visualization.BarChart(document.getElementById('chart1_div'));
                        chart1.draw(data1, options1);
                    });
                });

        $(document).ready(function(){
            //On button click, load new data
            $("#btn1").click(function(){
                        // Create the data table col headings or pie segment headings
                        var data2 = new google.visualization.DataTable();
                        data2.addColumn('string', '');
                        data2.addColumn('number', 'Number of Jobs by Category');                
                        data2.addRows
                        ([

                        DATA

                        ]);

                        // Set chart options
                        var options2 = {'title':'Approved Jobs - By Category-Last 12 Months',
                                       'width':700,
                                       'height':600};

                        // Instantiate and draw our chart, passing in some options.
                        var chart2 = new google.visualization.BarChart(document.getElementById('chart2_div'));
                        chart2.draw(data2, options2);
            });
        });

        $(document).ready(function(){
            //On button click, load new data
            $("#btn2").click(function(){    

                        // Create the data table col headings or pie segment headings
                                var data3 = new google.visualization.DataTable();
                                data3.addColumn('string', 'nothing doing');
                                data3.addColumn('number', 'Number of Jobs by Category');
                                data3.addRows
                        ([          
                        DATA         
                        ]);

                    // Set chart options
                        var options3 = {'title':'Approved Jobs - By Category-Last 12 Months',
                                       'width':700,
                                       'height':600};
                        // Instantiate and draw our chart, passing in some options.
                        var chart3 = new google.visualization.PieChart(document.getElementById('chart3_div'));
                        chart3.draw(data3, options3);   
            });
        });

}

图表脚本后面的三个div中的图表

   <div id="chart1_div"></div>
   <div id="chart2_div"></div>
   <div id="chart3_div"></div>

Answer 1

我怀疑在第二次/第三次更换或清除模式中的数据是一个问题。

您是否定位模式中的某个区域并将图表数据放入$（）。html（）？这可能是确保以前内容被覆盖的最简单方法。

如果我上面所述的内容无法解决问题，那么证明“添加chart1数据和选项”代码的示例可能会有所帮助。

在先前的按钮单击时禁用单击事件操作

1 个答案: