如何打印浮动图答案

【问题标题】：How to print flot graph如何打印浮动图
【发布时间】：2011-11-23 12:49:09
【问题描述】：

任何机构都可以帮助我找出如何打印动态图作为 flot 生成的示例。我试过这个，但它打印整个页面，但我只想要图形部分。

function printGraph(){
    $('<img src="../images/button_refresh.png" alt="Print Graph" style="">').appendTo(controlholder).click(function (e) {                        
        //Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
        //canvas.toDataURL("image/png");
        window.print('placeholder');
    });
}

【问题讨论】：

canvas2image 可能就是你要找的东西

标签： javascript flot

【解决方案1】：

此article 描述了如何将canvas 复制到普通img，然后可以轻松打印或保存为图像。

重要的部分：

img.src = canvas.toDataURL();

请参阅下方来自 Ignacio Correia 的出色 answer 了解更多详情。

【讨论】：

【解决方案2】：

启动一个新窗口，其中仅包含图表或备用 css，类似于您打印时谷歌地图所做的。

【讨论】：

【解决方案3】：

注意此帖已被编辑，请查看所有可能的解决方案

根据我的搜索结果，您只有 2 个选择，或者尝试打印 CANVAS，或者导出为图像，或者我的想法是将图像与内容分开并尝试仅打印图表。这是 Flot 的一个常见问题，如何导出图像：Question Number 3

问：我可以导出图表吗？

A：可以抓取 Flot 使用的 canvas 元素渲染的图像作为 PNG 或 JPEG（记得设置背景）。请注意，它不会包括未在画布中绘制的任何内容（例如图例）。而且它不适用于使用 VML 的 excanvas，但您可以尝试 Flashcanvas。

解决方案 1 - 导出图片：

Export image to computer and then print it

解决方案 2 - 浮动到画布：

解决方案 3 - 我自己的，模态打印

这不是迄今为止最好的解决方案，但它确实有效，这是一个演示：

步骤

加载 Fancybox
使用 INLINE FRAME 打开图表
演出后回调打印
打印后重新加载页面以重新设计页面

这是必要的代码：

$(document).ready(function() {
  $(".various").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    afterShow   : function() {
        alert('You are about to print the graph!');
        window.print();
    },
    afterClose  : function() {
        alert('We need to refresh the page!');
        window.location.reload(false); 
    }        
  });
});

额外这个相关的问题是关于将Flot导出为PDF，不知道大家有没有兴趣：Export Flot to PDF

编辑 - 工作解决方案 这是一个如何导出图像的工作演示：FLOT to IMAGE

【讨论】：

【解决方案4】：

您可以使用具有media="print" 的单独样式表来隐藏您不想打印的页面部分。这还允许您调整图形本身的最终打印输出，例如使其更大。

【讨论】：

【解决方案5】：

使用html2canvas 找到了解决方案。首先将容器 div 指定为具有类似“theChart”的 id。

<div class="box" id="theChart">
    <div id="placeholder"></div>
</div>

现在我们可以创建图像了：

html2canvas($('#theChart')).then(function(canvas) {
    image = canvas.toDataURL("image/png");
    document.location.href=image;
});

这也解决了canvas.toDataURL()不渲染轴标签时的问题。

【讨论】：