Charts 如何解决重复对话框另存为pdf的问题？
我正在使用选择框绘制图表，并以pdf格式打印图表 这是选择框和布局代码：Charts 如何解决重复对话框另存为pdf的问题？,charts,jspdf,Charts,Jspdf,我正在使用选择框绘制图表，并以pdf格式打印图表 这是选择框和布局代码： <div class= "chart-column"> <div class="chart-3-5block-inner"> <div class="chart-block-title">Job & Internship by Category</div>
<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);
});
}
函数drawCategoryNameChart（）{
//用于类别过滤器
$（'#category_filter'）。在（'change'，function（）上{
var select1=$（this）.val（）；//类别筛选器值
var jsonCategoryNameData=$.ajax({
url:“”，
contentType:“应用程序/json”，
数据：{Value1:select1}，
数据类型：“json”，
异步：false
}).responseText；
var CategoryNameData=新的google.visualization.DataTable（jsonCategoryNameData）；
var选项类别名称图表={
//标题：“按类别划分的工作/实习分布”，
titleTextStyle：{
颜色：'黑色'，
尺寸：18
},
请输入文本：“无”，
字体大小：“11”，
哈克斯：{
标题：“类别名称”，
},
言辞：{
标题：“总计”，
最小值：0，
网格线：{count:4}
},
图例：{textStyle:{color:'#464847'，fontSize:11}，
工具提示：{isHtml:true}，
背景颜色：“#F8F9FA”，
颜色：[“3B84BB”、“FFAF45”、“FFE345”、“0CAA63”、“1D40A6”、“F7AE12”、“F75012”、“6944C3”]，
图表区：{
背景颜色：{
笔划：“#fff”，
冲程宽度：1
}
},
身高：300，
图表区：{左：“10%”，顶：“20%”，宽：“70%”，高：“50%”
};
//实例化并绘制饼图，传入一些选项。
var CategoryNameChart=new google.visualization.ColumnChart（document.getElementById（'categoryname_chart_div'）；
//画图表
绘制（CategoryNameData，选项CategoryNameChart）；
google.visualization.events.addListener（CategoryNameChart'ready'，function（）{
btnSave.disabled=false；
});
var btnSave=document.getElementById（'pdf-categoryname'）；
btnSave.addEventListener（'click'，函数（）{
var doc=new jsPDF（）；
文件setFontSize（15）；
文件文本（70、25，“按类别划分的工作和实习”）；
addImage（CategoryNameChart.getImageURI（），15,30）；
文件setFontSize（9）；
doc.text（50115，“条形图显示关联公司发布的工作和实习类别”）；
doc.save（'category_name.pdf'）；
}，假）；
});
}
为什么会重复该操作？问题在于按钮中多次添加了单击事件
每次类别过滤器更改时
只能添加一次 若要更正，请将单击事件添加到更改事件之外 此外，将事件侦听器添加到图表时，
在绘制图表之前，应添加它们 请参阅以下代码段
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);
}
函数drawCategoryNameChart（）{
var btnSave=document.getElementById（'pdf-categoryname'）；
var分类图表；
//用于类别过滤器
$（'#category_filter'）。在（'change'，function（）上{
var select1=$（this）.val（）；//类别筛选器值
var jsonCategoryNameData=$.ajax({
url:“”，
contentType:“应用程序/json”，
数据：{Value1:select1}，
数据类型：“json”，
异步：false
}).responseText；
var CategoryNameData=新的google.visualization.DataTable（jsonCategoryNameData）；
var选项类别名称图表={
//标题：“按类别划分的工作/实习分布”，
titleTextStyle：{
颜色：'黑色'，
尺寸：18
},
请输入文本：“无”，
字体大小：“11”，
哈克斯：{
标题：“类别名称”，
},
言辞：{
标题：“总计”，
最小值：0，
网格线：{count:4}
},
图例：{textStyle:{color:'#464847'，fontSize:11}，
工具提示：{isHtml:true}，
背景颜色：“#F8F9FA”，
颜色：[“3B84BB”、“FFAF45”、“FFE345”、“0CAA63”、“1D40A6”、“F7AE12”、“F75012”、“6944C3”]，
图表区：{
背景颜色：{