这是我能编写的最简单的示例：
//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
在这里尝试示例。
9
马克，感谢您的贡献。顺便提一下，有时您可能会混合使用光标和缩放功能，并且您可能需要创建一个部分图形的图像，以便恢复缩放以创建其他部分的图像。这可能不容易，因为jqPlot不会为您将图形恢复到原始图形，所以您必须手动完成。
我的解决方案
在您的 $.jqplot 选项中添加以下代码：
cursor: { show: true, zoom: true, looseZoom: true, showTooltip: false, dblClickReset:true, }这样可以使用户回到图表的初始状态。如果您选择这种方法，请记得通过提示信息告知用户如何通过建议注释还原，例如：
双击图表将缩放还原至100%，以提高可用性。
对于那些更倾向于编程的人，这里有一个解决方案，其中包括马克介绍的一些代码（再次感谢）
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>attach an event listener and implement/register a handler like this
$('#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();
});
缩放后的图像创建 在我的应用程序中，我需要创建多个图像，来自图表的不同部分，因此缩放允许我放大这些部分，而画布到图像功能允许我保存在我放大某个点后在画布上显示的当前数据。 挑战是如何将我的新缩放点重新加载为新的要复制的图像 解决方法
- 创建绘制图像的按钮
- 附加监听器到jquery的toggle事件，允许您显示和隐藏图像
- 处理图像以管理缩放事件，即当我缩放时生成一个新图像，这样当我单击时，我看到的是缩放的部分的图像，而不是整个图表的旧图像
$('#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>
祝你好运
当你遇到图像输出问题时，你需要更改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代码之后添加以下内容到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); //
});
请查看此处的演示： 点击这里
看起来他们正在使用Canvas的一项功能来呈现图像：
https://bitbucket.org/cleonello/jqplot/src/0d4d1a4fe522/src/jqplot.toImage.js
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); //
我正在使用PrimeFaces 3.2，因此无法使用PrimeFaces中可用的新功能。
原文链接