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，这样它就会出现在图下方。

编辑：

看问题，实际上更多的是有点比。下面的代码是改编自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

试试这个。

添加此功能：

​​

然后在“$（文件）。就绪（...”的剧本，吸引你的图/图表的末尾添加一个调用它，才刚刚过去'}）;'

我从包含在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; 
    }