jqPlot顯示按鈕

我正在使用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' 
    } 
    } 
}); 

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')); 

});

圖表和按鈕被示出。但是，如果我點擊按鈕，則不會顯示保存的圖形。我可以請幫助解決這個問題嗎？

來源

2013-02-15 user2023359

你的問題是，你實際上並沒有將按鈕添加到DOM中。試試這個：

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

這將完成的就是添加一個按鈕作爲同級元素chart1 DIV，這樣它就會出現在圖下方。

編輯：

看問題，實際上更多的是有點比。下面的代碼是改編自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; 
}

使用這個我能顯示該按鈕，並讓它產生可下載圖像。

另請注意，您當前的代碼正在創建按鈕兩次 - 只需用上面的代碼替換該代碼即可。

來源

2013-02-15 11:10:10

謝謝。你能看看我更新的帖子嗎？ – user2023359 2013-02-17 20:46:06

@ user2023359看我的編輯。 – 2013-02-17 21:47:44

試試這個。

添加此功能：

然後在「$（文件）。就緒（...」的劇本，吸引你的圖/圖表的末尾添加一個調用它，纔剛剛過去'}）;'

我從包含在jqPlot下載中的example.js中取得了代碼，並將其作爲函數。

它不完全正確，頭部可以用一些CSS來做到這一點，但它可以工作。

CSS Edit。

需要更正「另存爲...」圖的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; 
    }

來源

2013-06-04 12:20:26 BeaconBlazer

jqPlot顯示按鈕

回答

相關問題