11

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

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

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

4

5 に答える 5

29

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

//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

ここでフィドル。

于 2012-08-30T17:55:48.863 に答える
3

貢献に感謝します。追加するだけで、カーソルとズーム機能が混在している場合があり、グラフのセクションの画像を作成する必要がある場合があります。元に戻してズームバックして他の画像を作成することを望んでいます。セクション。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% 使いやすさの目的で。

コーディングにもっと興味がある人のためにここに救済策があります、それはマークによって導入されたコードのいくつかを含みます（ありがとう）

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

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

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

*私の実装では、最新の画像のみを表示したかったので、新しい画像を要求するたびに、$（'＃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>

幸運を

于 2013-03-10T12:06:05.437 に答える
2

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

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

于 2012-08-29T16:52:07.340 に答える
2

画像出力に問題が発生した場合は、を変更する必要があり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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //
});

こちらのデモをご覧ください

于 2015-11-08T09:37:07.950 に答える
1

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

//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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //

私はprimefaces3.2を使用しているため、primefacesで利用可能な新機能を使用する機能がありません。

于 2013-08-06T14:25:16.763 に答える