0

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

在此处输入图像描述

然后按钮另存为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 按钮出现问题。When the select box is selected many times, multiple pop up box will appear when the save as button is clicked. 点击2次，出现2个弹出框。它保存所有以前选择的图表的图像。尽管选择框选择了几次，如何使它只出现一次？

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

这是示例 jsfiddle 玩。但它仍然没有完全工作。例如，我在里面包含了虚拟数据，所以需要稍微调整一下。

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

4

0 回答 0