jQuery JqPlot 作为图像

JqPlot As Image

提问by 109221793

In the latest JqPlot examples (see here, there are buttons underneath some charts that you can click, and a div slides down with the chart as an image, allowing you to right click and save as.

在最新的 JqPlot 示例中（参见此处，您可以单击一些图表下方的按钮，一个 div 将图表作为图像向下滑动，允许您右键单击并另存为。

I've checked the source and I just can't see myself where this is happening. I've seen various discussions about this (see herehowever my javascript is basic at best. This is however something I would like to implement in my current project.

我已经检查了来源，但我无法看到自己在哪里发生这种情况。我已经看到了有关此的各种讨论（请参阅此处，但是我的 javascript 充其量只是基本的。但是，这是我想在当前项目中实现的内容。

Is anyone aware of a complete tutorial as to how to do this, i.e. from the actual jquery code right down to implementation in html code.

是否有人知道有关如何执行此操作的完整教程，即从实际的 jquery 代码到在 html 代码中的实现。

回答by Mark

Here's the simplest example I can code up:

这是我可以编写的最简单的示例：

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

Fiddle here.

在这里摆弄。

回答by chitwarnold

Mark thanks for your contribution ,Just an Addition sometimes you may have mixed in(included) the cursor and Zoom functionality and you may need to create an image of a section of the graph, hoping to revert back to zoom back to create images of other sections. this may not be easy since jqPlot will not revert the graph for you to the original plot,so you have to this for yourself manually.

标记感谢您的贡献，只是添加有时您可能混合（包括）光标和缩放功能，您可能需要创建图形部分的图像，希望恢复到缩放以创建其他图像部分。这可能并不容易，因为 jqPlot 不会为您将图形还原为原始图，因此您必须自己手动执行此操作。

My Remedy

我的补救措施

1. Enrich your $.jqplot options with

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

   this allows users to be in a position to revert back to the graphs initial look. if you choose this approach remember to advice your users on how to revert back via an advice note such as

   Double click on the Graph to Reset Zoom back to 100% for usability purposes.

1. 丰富您的 $.jqplot 选项

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

   这使用户能够恢复到图形的初始外观。如果您选择这种方法，请记住通过建议说明建议您的用户如何恢复，例如

   Double click on the Graph to Reset Zoom back to 100% 出于可用性目的。

For Those more inclined to Coding Here is a remedy , it includes Some of the code introduced by Mark(Thanks Again)

对于那些更倾向于编码的人这里是一个补救措施，它包括Mark介绍的一些代码（再次感谢）

1. Create a button right below the graph, furnish it with an id attribute and attach an even handler to its click function,

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

2. attach an event listener and implement/register a handler like this

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

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

Image Creation after zoomIn my application i needed to create multiple images, out of different portions of the chart, so zoom allows me to magnify this parts, and the canvas to image functionality allows me to save the current data being shown in the canvas after i have zoomed in on a point. challenge was,how to reload my new zoom point as a new image for copyingRemedy

缩放后的图像创建在我的应用程序中，我需要从图表的不同部分创建多个图像，因此缩放允许我放大这部分，并且画布到图像功能允许我保存在画布中显示的当前数据之后我放大了一点。挑战是，如何将我的新缩放点重新加载为用于复制Remedy的新图像

1. Create your button for plot Image
2. attach a listener, to jquery's toggleevent allow for you to show and hide the image
3. Handle the image to manage the zoom events, i.e when i zoom in generate a new image, so that when i click i see the image of the zoomed-in part and not the old image of the whole chart

1. 为绘图图像创建按钮
2. 将侦听器附加到 jquery 的切换事件允许您显示和隐藏图像
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');
        }
    );

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

*In My implementation i only wanted to show the latest image,hence every time i ask for a new image i get rid of the old one via $('#plotted_image_div').empty();, which is simply emptying the old image and then appending the new one. *

*在我的实现中，我只想显示最新图像，因此每次我要求新图像时，我都会通过 $('#plotted_image_div').empty(); 删除旧图像，这只是清空旧图像然后追加新的。*

*Here is my HTML for those who may need further clarity *

*这是我的 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>

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

Good Luck

祝你好运

回答by disperse

It looks like they're using a feature of Canvas to render to an image:

看起来他们正在使用 Canvas 的一项功能来渲染图像：

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

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

回答by bernte

When you got problems with the image output you have to change the jquery.jqplot.js. On some browsers the script stops of infinte loop (Chrome and Firefox).

当您遇到图像输出问题时，您必须更改jquery.jqplot.js. 在某些浏览器上，脚本会停止无限循环（Chrome 和 Firefox）。

change this code:

更改此代码：

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

to this:

对此：

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

add this to your html:

将此添加到您的 html：

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

and this to jquery after your jqplot-code:

在您的 jqplot 代码之后，这是对 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);?????????????????????????????????????????????????? //
});

See a demo here

在此处查看演示

回答by Sharan Rajendran

This solution worked well for me. Simple and quick.

这个解决方案对我来说效果很好。简单快捷。

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

I am using primefaces 3.2 and hence dont have the ability to use the new feature available in primefaces

我使用的是 primefaces 3.2，因此无法使用 primefaces 中可用的新功能