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 に追加され、プロットの下に表示されます。

編集：

問題を見ると、実際にはそれよりももう少し多くのことがあります。次のコードは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;
}

これを使用して、ボタンを表示し、ダウンロード可能な画像を生成することができました。

また、現在のコードでボタンが 2 回作成されていることにも注意してください。そのコードを上記のコードに置き換えてください。

于 2013-02-15T11:10:10.957 に答える