jqPlot показать изображение при нажатии кнопки

Question

Я использую 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> 

UPDATE

Для нескольких диаграмм показан только один образ. Что мне нужно сделать с этим кодом, чтобы показывать несколько диаграмм? Кроме того, каждая диаграмма в другой DIV:

$('#chart1').after(outerDiv); 
outerDiv.hide(); 

outerDiv = header = div = close = null; 

UPDATE2

По какой-то причине, ни один из моих графиках не сейчас отображения. Я предполагаю, что в моем коде есть простая ошибка. Могу ли я, пожалуйста, оказать помощь в том, что я сделал неправильно? Кроме того, диаграммы называются «FinancialsLineGraph» и «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); 
}); 

UPDATE

Я нашел рабочее решение для каждого индивидуального графика. Вот мой код:

$('#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; 

});  

Answer 1

Заменить этот блок кода:

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; 

С этим:

$('#chart1').bind('jqplotClick', function(ev, seriesIndex, pointIndex, data) {     
    var imgelem = $('#chart1').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; 
}); 

Edit:

Чтобы получить этот код работает несколько участков, вы можете попробовать что-то вроде этого:

if (!$.jqplot.use_excanvas) { 
    var charts = ['#chart1', '#chart2', '#chart3']; 

    $.each(charts, function(index, value) { 
     (function(chartId) { 
      //The code that you currently have in the if-block. 

     })(value); 
    }); 
} 

Затем вам нужно будет заменить любое вхождение '#chart1' внутри $each с chartId.

Edit 2:

Я думаю, что ваш полный код отсутствует часть, где событие сюжета проводная вверх.

Где вы в настоящее время:

outerDiv = header = div = close = null; 

Добавить это право после него:

$(chartId).bind('jqplotClick', function(ev, seriesIndex, pointIndex, data) {     
    var imgelem = $(chartId).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; 
});