11

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

我已经检查了源代码，但我只是看不到发生这种情况的地方。我已经看到了有关此的各种讨论（请参阅此处，但是我的 javascript 充其量是基本的。但是，这是我想在我当前的项目中实现的东西。

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

4

5 回答 5

29

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

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

在这里拉小提琴。

于 2012-08-30T17:55:48.863 回答
3

标记感谢您的贡献，有时您可能已经混入（包括）光标和缩放功能，您可能需要创建图表的一部分的图像，希望恢复缩放以创建其他图像部分。这可能并不容易，因为 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% 出于可用性目的。

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

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

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

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

*在我的实现中，我只想显示最新图像，因此每次我要求新图像时，我都会通过 $('#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>

祝你好运

于 2013-03-10T12:06:05.437 回答
2

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

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

于 2012-08-29T16:52:07.340 回答
2

当您遇到图像输出问题时，您必须更改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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //
});

在此处查看演示

于 2015-11-08T09:37:07.950 回答
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 中提供的新功能

于 2013-08-06T14:25:16.763 回答