为什么会出现多个保存弹出框？

Question

我使用谷歌图表绘制图表。使用选择框显示图表。

然后按下保存为pdf的按钮将保存为对话框，以pdf格式保存图像。

这是代码：

google.charts.setOnLoadCallback(drawCategoryNameChart); 
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);

             });
    }

图表显示在此代码中;

<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>

但是，另存为pdf按钮会出现问题。多次选择选择框时，单​​击“另存为”按钮时会出现多个弹出框。点击2次，弹出2个弹出框。它保存所有先前所选图表的图像。如果选择框选择了几次，如何只显示一次？

如果我将btnSave函数放在onchange函数之外，那么它就无法读取CategoryNameChart。如何在onchange函数中获取CategoryNameChart的值，以便btnSave可以获取值并使用它？

这是jsfiddle的例子。但它还没有完全发挥作用。我在内部包含虚拟数据，因此需要稍微调整一下。

https://jsfiddle.net/5aprn44f/3/