0

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

});

显示图形和按钮。但是，如果我单击该按钮，则不会显示要保存的图形。我可以帮忙解决这个问题吗？

4

2 回答 2

1

您的问题是您实际上并没有将按钮添加到 DOM 中。试试这个：

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

这将做的是添加一个按钮作为chart1div 的兄弟元素，以便它出现在绘图下方。

编辑：

看看这个问题，实际上还有更多的问题。以下代码改编自此处：

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-15T11:10:10.957 回答
0

试试这个。

添加此功能：

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 编辑。

纠正“另存为..”图所需的 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-04T12:20:26.557 回答