JqPlot作为图像
在最新的JqPlot示例中（参见此处 ，您可以单击某些图表下方的按钮，并将div向下滑动，图表为图像，允许您右键单击并另存为。
我检查了源代码，我无法看到自己发生了什么。 我已经看到了关于这个的各种讨论（请参阅此处，但是我的javascript是最基本的。但是我想在我当前的项目中实现这一点。
是否有人知道如何执行此操作的完整教程，即从实际的jquery代码到html代码中的实现。
这是我可以编写的最简单的例子：
//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 在这里小提琴。
谢谢你的贡献，Just a Addition有时你可能混合了（包括）光标和缩放function，你可能需要创建一个图形的一部分的图像，希望恢复缩放以创建其他图像部分。 这可能并不容易，因为jqPlot不会将图形还原为原始图表，因此您必须自己手动执行此操作。
我的补救措施
-
用你的$ .jqplot选项丰富
cursor: { show: true, zoom: true, looseZoom: true, showTooltip: false, dblClickReset:true, }这允许用户能够恢复到图形的初始外观。 如果您选择这种方法，请记住建议您的用户如何通过建议说明如回复
出于可用性目的，
Double click on the Graph to Reset Zoom back to 100%。
对于那些更倾向于编码的人来说，这是一种补救措施，它包括Mark引入的一些代码（再次感谢）
-
在图形正下方创建一个按钮，为其提供一个id属性，并为其click函数附加一个偶数处理程序，
-
附加一个事件监听器并实现/注册这样的处理程序
$('#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 的新图像
- 为绘图图像创建按钮
- 附加一个监听器，到jquery的切换事件允许你显示和隐藏图像
- 处理图像以管理缩放事件，即当我放大生成新图像时，当我点击时我看到放大部分的图像而不是整个图表的旧图像
$('#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，可能需要进一步明确*
Double click on the Graph to Reset Zoom back to 100%
祝好运
看起来他们正在使用Canvas的一个function来渲染图像：
https://bitbucket.org/cleonello/jqplot/src/0d4d1a4fe522/src/jqplot.toImage.js
当您遇到图像输出问题时，您必须更改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); // });
在这里看一个演示
这个解决方案适合我。 简单快捷。
//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