Question

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

我检查过来源，我无法看到自己发生了什么。我已经看到了关于此的各种讨论（参见here但是我的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 = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem); // append the img to the DOM

小提琴here。

Answer 2

谢谢你的贡献，只是添加有时你可能混入（包括）光标和缩放功能，你可能需要创建一个图形的一部分的图像，希望恢复缩放回创建其他部分的图像。这可能并不容易，因为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属性，并在其点击功能中附加偶数处理程序，

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

附加一个事件监听器并实现/注册这样的处理程序



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

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

创建情节图像按钮

将监听器附加到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 = $('<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'); } );

*在我的实现中，我只想显示最新的图像，因此每当我要求新图像时，我都会通过$（'＃mapped_image_div'）摆脱旧图像。空（）;,这只是清空旧图像然后附加新图像。 *

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

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

祝你好运

Answer 3

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

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

Answer 4

当您遇到图像输出问题时，您必须更改jquery.jqplot.js。在某些浏览器上，脚本停止了infinte循环（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); //
});

查看演示here

Answer 5

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

//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中提供的新功能

JqPlot作为图像

5 个答案: