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에 형제 요소로 버튼을 추가합니다.

편집 : 문제를 보면이

, 그것보다 조금 더 사실이있다. 내가 버튼을 보여줄 수 있었다이 사용

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

하고 다운로드 이미지를 가지고 : 다음 코드는 here에서 적응된다.

또한 현재 코드는 버튼을 두 번 만들고 있습니다. 코드를 위의 코드로 바꾸십시오.

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 (..."스크립트의 마지막에 호출을 추가 :

이 기능을 추가 '});'

jqPlot의 다운로드에 포함 된 example.js 코드를 가져 와서 함수로 만들었습니다.

헤더가 약간 CSS를 사용하면 꽤 잘될 수 있지만 제대로 작동합니다.

CSS 편집.

'Save as ..'플롯을 수정하는 데 필요한 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; 
    }