Кнопка отображения 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' 
    } 
    } 
}); 

var c = $(document.createElement("button")); 
c.text("View Plot Image test"); 
c.addClass("jqplot-image-button"); 
c.bind("click", { 
    chart: $(this) 
}, function (h) { 
    var j = h.data.chart.jqplotToImageElem(); 
    var i = $(this).nextAll("div.jqplot-image-container").first(); 
    i.children("div.jqplot-image-container-content").empty(); 
    i.children("div.jqplot-image-container-content").append(j); 
    i.show(500); 
    i = null 
    }); 

var c = $("<button type='button'></button>") 
.text('View Plot Image test') 
.addClass('jqplot-image-button') 
.insertAfter($('#chart1')); 

}); 

График и кнопки показаны. Однако, если я нажму кнопку, ни один график не будет сохранен. Могу ли я, пожалуйста, помочь вам это исправить?

Answer 1

Ваша проблема в том, что вы фактически не добавляете кнопку в DOM. Попробуйте это:

var c = $("<button type='button'></button>") 
    .text('View Plot Image test') 
    .addClass('jqplot-image-button') 
    .insertAfter($('#chart1')); 

Что это будет сделать, это добавить кнопку в качестве родственного элемента к chart1 DIV, так что она окажется ниже сюжета.

Edit:

Глядя на эту проблему, есть на самом деле немного больше, чем это. Следующий код адаптирован из here:

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; 
} 

Используя это, я был в состоянии показать кнопку и он производит загружаемое изображение.

Обратите внимание, что ваш текущий код дважды создает кнопку - просто замените этот код кодом выше.

Answer 2

Попробуйте это.

Добавьте эту функцию:

function addButton() { 
    $('div.jqplot-target').each(function() { 
     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('<div class="header">Right Click to Save Image As...'); 

     var close = $(document.createElement('a')); 
     close.addClass('jqplot-image-container-close'); 
     close.html('Close</div>'); 
     close.attr('href', '#'); 
     close.click(function() { 
      $(this).parents('div.jqplot-image-container').hide(500); 
     }) 
     header.append(close); 

     $(this).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: $(this) }, 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; 
     }); 

     $(this).after(btn); 
     btn.after('<br />'); 
     btn = null; 
    }); 
}; 

Затем добавить вызов к нему в конце «$ (документ) .ready (...» сценарий, который рисует ваш диаграмма/график, как раз перед последним '});'

Я взял код из example.js, который включен в загрузку jqPlot и сделал его функцией.

Его не совсем верно, заголовок может сделать с некоторым CSS, чтобы немного поиграть, но он работает.

Редактирование CSS.

Css необходимо скорректировать график «Сохранить как ..» ниже.

.jqplot-image-button { 
     margin-bottom: 15px; 
     margin-top: 15px; 
    } 

    div.jqplot-image-container { 
     position: relative; 
     z-index: 11; 
     margin: auto; 
     display: none; 
     background-color: #ffffff; 
     border: 1px solid #999; 
     display: inline-block; 
     margin-top: 25px; 
    } 

    div.jqplot-image-container-header { 
     font-size: 1.0em; 
     font-weight: bold; 
     padding: 5px 15px; 
     background-color: #eee; 
    } 

    div.jqplot-image-container-content { 
     padding: 15px; 
     background-color: #ffffff; 
    } 

    a.jqplot-image-container-close { 
     float: right; 
    }