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

});

$（文档）.ready（函数（）{
var-cosPoints=[]；
对于（var i=0；i而言，您的问题在于您实际上没有将按钮添加到DOM中。请尝试以下操作：

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

使用这个，我能够显示按钮，并让它产生可下载的图像

还请注意，您当前的代码正在创建按钮两次-只需将该代码替换为上面的代码。
试试这个

添加此功能：

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

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

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