问题描述
我正在使用选择框绘制图表并以pdf格式打印该图表.
I am drawing chart using selection box and printed the chart in pdf format.
这是选择框和布局代码:
This is the selection box and the layout code:
<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保存框会出现两次.弹出框的编号根据选择框中的选择数量显示.
My problem is when click on the button save as pdf, the pdf save box come out twice if I click on the selection box twice. The number of the pop up box appear according to the number of selection from the select box.
为什么要重复操作?
推荐答案
问题是多次将click事件添加到按钮中
每次类别过滤器更改
只能添加一次
the problem is the click event is being added to the button multiple times
every time the category filter changes
it should only be added once
要进行更正,请在更改事件之外添加click事件
to correct, add the click event outside of the change event
还将事件侦听器添加到图表时,
应该在绘制图表之前添加它们
also, when adding event listeners to a chart,
they should be added before the chart is drawn
请参阅以下代码段...
see following snippet...
function drawCategoryNameChart() {
var btnSave = document.getElementById('pdf-categoryname');
var CategoryNameChart;
// 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.
CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div'));
google.visualization.events.addListener(CategoryNameChart, 'ready', function () {
btnSave.disabled = false;
});
//draw the chart
CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart);
});
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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!