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

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

アップデート

複数のチャートの場合、1つの画像のみが表示されます。複数のグラフを表示できるようにするには、このコードをどのように処理する必要がありますか？また、各チャートは異なるdivにあります。

$('#chart1').after(outerDiv);
outerDiv.hide();

outerDiv = header = div = close = null;

UPDATE2

何らかの理由で、現在どのチャートも表示されていません。コードに単純なエラーがあると思います。私が間違ったことについて助けてもらえますか？また、チャートは「FinancialsLineGraph」および「SalesMonthVsBudgetLineGraph」と呼ばれます。

これが私の完全なコードです：

if (!$.jqplot.use_excanvas) {
var charts = ['#FinancialsLineGraph', '#SalesMonthVsBudgetLineGraph'];

$.each(charts, function(index, value) {
    (function(chartId) {
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);

$(chartId).after(outerDiv);
outerDiv.hide();

outerDiv = header = div = close = null;

    })(value);
});

アップデート

個々のチャートごとに実用的な解決策を見つけました。これが私のコードです：

    $('#FinancialsLineGraph').bind('jqplotClick', function(ev, seriesIndex, pointIndex, data) {                    
 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);

$('#FinancialsLineGraph').after(outerDiv);
outerDiv.hide();   

outerDiv = header = div = close = null;  

var imgelem = $('#FinancialsLineGraph').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;

});
4

1 に答える 1

0

このコードブロックを置き換えます。

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;

これで：

$('#chart1').bind('jqplotClick', function(ev, seriesIndex, pointIndex, data) {                
    var imgelem = $('#chart1').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;
});

編集：

そのコードを複数のプロットで機能させるには、次のような方法を試すことができます。

if (!$.jqplot.use_excanvas) {
    var charts = ['#chart1', '#chart2', '#chart3'];

    $.each(charts, function(index, value) {
        (function(chartId) {
            //The code that you currently have in the if-block.

        })(value);
    });
}

'#chart1'次に、内の出現箇所$eachをで置き換える必要がありますchartId。

編集2：

あなたの完全なコードには、プロットイベントが配線されている部分が欠けていると思います。

あなたが現在持っている場所：

outerDiv = header = div = close = null;

その直後にこれを追加します。

$(chartId).bind('jqplotClick', function(ev, seriesIndex, pointIndex, data) {                
    var imgelem = $(chartId).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;
});
于 2013-02-18T00:27:30.443 に答える