Question

我根据选择绘制图表，可以使用按钮保存为pdf。但是，当用户选择几次时，单击按钮会根据选择的数量触发多次下载。它应该只触发1次下载，这是最新选择的图表。如何避免多次下载？

这是图表：

这是布局的代码：

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

这是绘制图表的代码：

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:"5%",top:"20%",width:"80%",height:"50%" }
                              };        

                // Instantiate and draw our pie chart, passing in some options.
                var CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div'));
                google.visualization.events.addListener(CategoryNameChart, 'ready', function () {
                   btnSave.disabled = false;
                });


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

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

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

                });


    }

Answer 1

有点棘手，我已经重新调整它，请测试一下，如果还有问题，如果我错过任何事情请告诉我

google.charts.setOnLoadCallback(drawCategoryNameChart);

function drawCategoryNameChart() {
    var CategoryNameData; //move out the variable 
    // 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 //since this is async = false, we can ensure that this part will always run first
            }).responseText;

        //var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData);
        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: "5%",
            top: "20%",
            width: "80%",
            height: "50%"
        }
    };

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

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

    btnSave.on('click', function(){
        var doc = new jsPDF();
        doc.setFontSize(15);
        doc.text(80, 25, "Jobs by Category");
        doc.addImage(CategoryNameChart.getImageURI(), 15, 30);
        doc.setFontSize(9);
        doc.text(55, 115, "The bar chart shows the category of job posted by linked companies");
        doc.save('category_name.pdf');
    });

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

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

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

}

保存为PDF按钮单击触发多次下载

1 个答案: