点击按钮jqPlot显示图像

我正在使用jqPlot来显示一些图表，同时还有一个按钮可以将图表保存到图像中。

我可以帮助修改代码吗？这样，点击图表时就会显示图像，而不是有按钮。

这是我的代码：

<script class="code" type="text/javascript">
$(document).ready(function(){
var cosPoints = []; 
for (var i=0; i<2*Math.PI; i+=0.1){ 
 cosPoints.push([i, Math.cos(i)]); 
} 
var plot1 = $.jqplot('chart1', [cosPoints], {  
  series:[{showMarker:false}],
  axes:{
    xaxis:{
      label:'Angle (radians)'
    },
    yaxis:{
      label:'Cosine'
    }
  }
});
if (!$.jqplot.use_excanvas) {
var outerDiv = $(document.createElement('div'));
var header = $(document.createElement('div'));
var div = $(document.createElement('div'));
outerDiv.append(header);
outerDiv.append(div);
outerDiv.addClass('jqplot-image-container');
header.addClass('jqplot-image-container-header');
div.addClass('jqplot-image-container-content');
header.html('Right Click to Save Image As...');
var close = $(document.createElement('a'));
close.addClass('jqplot-image-container-close');
close.html('Close');
close.attr('href', '#');
close.click(function() {
    $(this).parents('div.jqplot-image-container').hide(500);
})
header.append(close);
$('#chart1').after(outerDiv);
outerDiv.hide();
outerDiv = header = div = close = null;
var btn = $(document.createElement('button'));
btn.text('View Plot Image');
btn.addClass('jqplot-image-button');
btn.bind('click', {chart: $('#chart1')}, function(evt) {
    var imgelem = evt.data.chart.jqplotToImageElem();
    var div = $(this).nextAll('div.jqplot-image-container').first();
    div.children('div.jqplot-image-container-content').empty();
    div.children('div.jqplot-image-container-content').append(imgelem);
    div.show(500);
    div = null;
});
$('#chart1').after(btn);
btn.after('<br />');
btn = null;
}  
});
</script>

更新

对于多个图表，只显示一个图像。我需要如何处理此代码才能显示多个图表？此外，每个图表都在不同的div中：

$('#chart1').after(outerDiv);
outerDiv.hide();
outerDiv = header = div = close = null;

更新2

出于某种原因，我的图表现在都没有显示。我猜我的代码中有一个简单的错误。我做错了什么，能帮我一下吗？此外，这些图表被称为"FinancialsLineGraph"answers"SalesMonthVsBudgetLineGraph"。

这是我的完整代码：

if (!$.jqplot.use_excanvas) {
var charts = ['#FinancialsLineGraph', '#SalesMonthVsBudgetLineGraph'];
$.each(charts, function(index, value) {
    (function(chartId) {
var outerDiv = $(document.createElement('div'));
var header = $(document.createElement('div'));
var div = $(document.createElement('div'));
outerDiv.append(header);
outerDiv.append(div);
outerDiv.addClass('jqplot-image-container');
header.addClass('jqplot-image-container-header');
div.addClass('jqplot-image-container-content');
header.html('Right Click to Save Image As...');
var close = $(document.createElement('a'));
close.addClass('jqplot-image-container-close');
close.html('Close');
close.attr('href', '#');
close.click(function() {
    $(this).parents('div.jqplot-image-container').hide(500);
})
header.append(close);
$(chartId).after(outerDiv);
outerDiv.hide();
outerDiv = header = div = close = null;
    })(value);
});

更新

我为每个图表找到了一个有效的解决方案。这是我的代码：

    $('#FinancialsLineGraph').bind('jqplotClick', function(ev, seriesIndex, pointIndex, data) {                    
 var outerDiv = $(document.createElement('div'));
var header = $(document.createElement('div'));
var div = $(document.createElement('div'));
outerDiv.append(header);
outerDiv.append(div);
outerDiv.addClass('jqplot-image-container');
header.addClass('jqplot-image-container-header');
div.addClass('jqplot-image-container-content');
header.html('Right Click to Save Image As...');
var close = $(document.createElement('a'));
close.addClass('jqplot-image-container-close');
close.html('Close');
close.attr('href', '#');
close.click(function() {
    $(this).parents('div.jqplot-image-container').hide(500);
})
header.append(close);
$('#FinancialsLineGraph').after(outerDiv);
outerDiv.hide();   
outerDiv = header = div = close = null;  
var imgelem = $('#FinancialsLineGraph').jqplotToImageElem();
var div = $(this).nextAll('div.jqplot-image-container').first();
div.children('div.jqplot-image-container-content').empty();
div.children('div.jqplot-image-container-content').append(imgelem);
div.show(500);
div = null;
});