web-dev-qa-db-ja.com

JqPlot As Image

最新のJqPlotの例（ ここ を参照）では、いくつかのグラフの下にクリックできるボタンがあり、divはグラフを画像として下にスライドし、右クリックして名前を付けて保存できます。

ソースを確認しましたが、これがどこで発生しているのかわかりません。私はこれについてさまざまな議論を見てきました（ ここ を参照してください。ただし、私のJavaScriptはせいぜい基本的なものです。しかし、これは現在のプロジェクトで実装したいものです。

これを行う方法、つまり実際のjqueryコードからhtmlコードでの実装までの完全なチュートリアルを知っている人はいますか？.

jqueryjqplot
11
109221793

これが私がコーディングできる最も簡単な例です：

//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ // append the img to the DOM

フィドル ここ 。

29
Mark

あなたの貢献に感謝します、ちょうどあなたがカーソルとズーム機能を混ぜ合わせた（含まれている）かもしれません、そしてあなたは他の画像を作成するためにズームバックに戻ることを望んで、グラフのセクションの画像を作成する必要があるかもしれませんセクション。 jqPlotはグラフを元のプロットに戻さないため、これは簡単ではない可能性があります。そのため、手動でこれを行う必要があります。

私の救済

  1. $ .jqplotオプションを次のように充実させます

    cursor: { show: true, zoom: true, looseZoom: true, showTooltip: false, dblClickReset:true, }

    これにより、ユーザーはグラフの最初の外観に戻ることができます。このアプローチを選択する場合は、次のようなアドバイスノートを介して元に戻す方法についてユーザーにアドバイスすることを忘れないでください。

    Double click on the Graph to Reset Zoom back to 100%使いやすさの目的で。

コーディングを好む人のためにここに救済策があります、それはMark（Thanks Again）によって導入されたコードのいくつかを含みます

  1. グラフのすぐ下にボタンを作成し、id属性を指定して、クリック関数に偶数ハンドラーをアタッチします。

            <button id="show_revert_graph_btn" class="jqplot-replot-button" title="Reset Zoom back to 100%">Revert the Graph</button>

  2. イベントリスナーをアタッチし、このようなハンドラーを実装/登録します

$('#show_revert_graph_btn').click(function(){
  // simulating a double click on the  canvas
  // not that the selecting expression includes 
  // the div id of where i chose to plot the chart "chart104" and the default class
  // provided to the canvas holding my chart i.e "canvas.jqplot-event-canvas"
  // then i double click it
        $('#chart104 canvas.jqplot-event-canvas').dblclick();
    });
</ code>

ズーム後の画像作成私のアプリケーションでは、チャートのさまざまな部分から複数の画像を作成する必要があったため、ズームによりこの部分を拡大でき、キャンバスから画像への機能により現在の画像を保存できますポイントを拡大した後、キャンバスにデータが表示されます。 課題は、コピー用の新しい画像として新しいズームポイントをリロードする方法対処法

  1. プロット画像のボタンを作成します
  2. jqueryのtoggleイベントにリスナーをアタッチすると、画像を表示および非表示にできます
  3. 画像を処理してズームイベントを管理します。つまり、ズームインすると新しい画像が生成され、クリックすると、グラフ全体の古い画像ではなく、ズームインした部分の画像が表示されます。
 $('#show_plotted_image_btn').toggle(
        function(){
            console.log('showing graph');
            // get the image
            function genImg(){
            var imgData = $('#chart104').jqplotToImageStr({});
       // given the div       id of your plot, get the img data
            var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
            $('#plotted_image_div').empty(); // remove the old graph
            $('#plotted_image_div').append(imgElem);
            };
            genImg();
            // show the image
            $('#plotted_image_div').css('display','block');

        },
        function(){
            // hide the image
            console.log('hiding graph');
            $('#plotted_image_div').css('display','none');
        }
    );
</ code>

*私の実装では、最新の画像のみを表示したかったので、新しい画像を要求するたびに、$（ '＃plotted_image_div'）。empty（）;を介して古い画像を削除します。これは、単に古い画像を空にするだけです。次に、新しいものを追加します。 *

*これがさらに明確にする必要があるかもしれない人のための私のHTMLです*

<div id="chart104" class=""></div>

            <button id="show_plotted_image_btn" class="jqplot-image-button">View Plot Image</button>
            <span style="font-weight: bold; color:#FC2896;"> Double click on the Graph to Reset Zoom back to 100%</span>
            <button id="show_revert_graph_btn" class="jqplot-replot-button" title="Reset Zoom back to 100%">Revert the Graph</button>
            <div id="plotted_image_div" class="" style="display: none;"></div>
</ code>

幸運

3
chitwarnold

画像出力に問題が発生した場合は、jquery.jqplot.jsを変更する必要があります。一部のブラウザでは、スクリプトが無限ループを停止します（ChromeおよびFirefox）。

このコードを変更します：

for (var i=0; i<wl; i++) {
    w += words[i];
    if (context.measureText(w).width > tagwidth) {
        breaks.Push(i);
        w = '';
        i--;
    }   
}

これに：

for (var i=0; i<wl; i++) {
    w += words[i];
    if (context.measureText(w).width > tagwidth && w.length > words[i].length) {
        breaks.Push(i);
        w = '';
        i--;
    }   
}

これをHTMLに追加します：

<div id="chart"></div>
<div id="imgChart"></div>

そしてこれをjqplot-codeの後にjqueryに：

$(document).ready(function(){
    //after creating your plot do
    var imgData = $('#chart').jqplotToImageStr({}); // given the div id of your plot, get the img data
    var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
    $('#imgChart').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //
});

デモを見る ここ

2
bernte

Canvasの機能を使用して画像にレンダリングしているようです。

https://bitbucket.org/cleonello/jqplot/src/0d4d1a4fe522/src/jqplot.toImage.js

2
disperse

この解決策は私にとってうまくいきました。シンプルで迅速。

//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //

Primefaces 3.2を使用しているため、Primefacesで利用できる新機能を使用できません。

1
Sharan Rajendran