JqPlot作为图像

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

我检查了源代码，我无法看到自己发生了什么。 我已经看到了关于这个的各种讨论（请参阅此处，但是我的javascript是最基本的。但是我想在我当前的项目中实现这一点。

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

Answer 1

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

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

在这里小提琴。

Answer 2

谢谢你的贡献，Just a Addition有时你可能混合了（包括）光标和缩放function，你可能需要创建一个图形的一部分的图像，希望恢复缩放以创建其他图像部分。 这可能并不容易，因为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引入的一些代码（再次感谢）

1. 在图形正下方创建一个按钮，为其提供一个id属性，并为其click函数附加一个偶数处理程序，

     Revert the Graph 

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 ie "canvas.jqplot-event-canvas" // then i double click it $('#chart104 canvas.jqplot-event-canvas').dblclick(); }); 

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

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

*在我的实现中我只想显示最新的图像，因此每次我要求一个新的图像我通过$（’＃marked_image_div’）摆脱旧的图像。空（）;，这只是清空旧图像然后附加新的。 *

* 这是我的HTML，可能需要进一步明确*

 
 View Plot Image  Double click on the Graph to Reset Zoom back to 100% Revert the Graph 
 

祝好运

Answer 3

看起来他们正在使用Canvas的一个function来渲染图像：

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

Answer 4

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

更改此代码：

 for (var i=0; i tagwidth) { breaks.push(i); w = ''; i--; } } 

对此：

 for (var i=0; i tagwidth && w.length > words[i].length) { breaks.push(i); w = ''; i--; } } 

将此添加到您的HTML：

这是你的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 = $('').attr('src',imgData); // create an img and add the data to it $('#imgChart').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ // }); 

在这里看一个演示

Answer 5

这个解决方案适合我。 简单快捷。

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

我正在使用primefaces 3.2，因此没有能力使用primefaces中提供的新function