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

尝尝这个。

添加此函数：

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

然后在"$(document).ready(...“绘制图表/图形的脚本，就在最后一个‘})之前；’

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