Question

我正在使用选择框绘制图表并以pdf格式打印图表。

这是选择框和布局代码：

<div class= "chart-column">
                        <div class="chart-3-5block-inner">
                            <div class="chart-block-title">Job & Internship by Category</div>
                            <div class="chart-view" style="padding-top: 10px; padding-left: 10px">

                                <!-- //combo box options to select application filter -->
                                <?php
                                     echo 'Category Group: ';
                                     echo '<select id="category_filter">';
                                     echo '<option value="0" selected="selected">Select</option>';
                                     echo '<option value="1">Accounting/Finance</option>';
                                     echo '<option value="2">Admin/Human Resources</option>';
                                     echo '<option value="3">Arts/Media/Communications</option>';
                                     echo '<option value="4">Building/Construction</option>';
                                     echo '<option value="5">Computer/Information Technology</option>';
                                     echo '<option value="6">Education/Training</option>';
                                     echo '<option value="7">Engineering</option>'; 
                                     echo '</select>';

                                ?>

                            </div>                  
                            <div class="chart-view" id="categoryname_chart_div"></div>
                            <div class="chart-block-description">The bar chart shows the category of job & Internship posted by linked companies</div>
                            <div class="chart-block-view">
                                <input id="pdf-categoryname" type="button" value="Save as PDF" disabled />
                            </div>
                        </div>

这是绘制图表的代码。

function drawCategoryNameChart(){

                // for category-filter
                $('#category_filter').on('change',function(){
                var select1 = $(this).val();  // category-filter value
                var jsonCategoryNameData = $.ajax({
                            url: "<?php echo $ajaxurl11; ?>",
                            contentType: "application/json",
                            data: {Value1 : select1},
                            dataType: "json",
                            async: false
                            }).responseText;

                var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData);

                var optionsCategoryNameChart = {
                             //title: 'Job/Internship Distribution by Category',
                             titleTextStyle: {
                                  color: 'Black',
                                  fontSize: 18
                                },
                                pieSliceText: 'none',
                             fontSize: '11',
                             hAxis: {
                                  title: 'Category Name',
                                },
                             vAxis: {
                                  title: 'Total',
                                  minValue: 0,
                                  gridlines: { count: 4 }       
                                },
                             legend: {textStyle: {color: '#464847', fontSize: 11}},
                             tooltip: {isHtml: true},
                             backgroundColor: '#F8F9FA',
                             colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'],
                             chartArea: {
                                    backgroundColor: {
                                        stroke: '#fff',
                                        strokeWidth: 1
                                    }
                                },
                             height: 300,
                             chartArea: { left:"10%",top:"20%",width:"70%",height:"50%" }
                              };        


                // Instantiate and draw our pie chart, passing in some options.
                var CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div'));

                //draw the chart      
                CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart);

                google.visualization.events.addListener(CategoryNameChart, 'ready', function () {
                   btnSave.disabled = false;
                });

                var btnSave = document.getElementById('pdf-categoryname');

                btnSave.addEventListener('click', function () {
                    var doc = new jsPDF();
                    doc.setFontSize(15);
                    doc.text(70, 25, "Job & Internship by Category");
                    doc.addImage(CategoryNameChart.getImageURI(), 15, 30);
                    doc.setFontSize(9);
                    doc.text(50, 115, "The bar chart shows the category of job & Internship posted by linked companies");
                    doc.save('category_name.pdf');
                  }, false);
                });

    }

我的问题是当点击按钮保存为pdf时，如果我点击两次选择框，则pdf保存框会出现两次。根据选择框中的选择数量显示弹出框的编号。

为什么要重复这个动作？

Answer 1

问题是点击事件多次被添加到按钮
每次类别过滤器更改
它应该只添加一次

要更正，请在更改事件

之外添加click事件

同样，在向图表添加事件监听器时，
它们应该在绘制图表之前添加

请参阅以下摘录...

bundle.js

如何解决重复对话框另存为pdf？

1 个答案: