在8中打印flot graph

本文介绍了在8中打印flot graph的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在使用获取图表插件。我试图实现从内容包围的页面打印flot图形的能力。我正在尝试打开一个新窗口并打印一个画布对象，这样我就可以打印出flot图，我已经成功完成了。但是，为了做到这一点，我需要使画布成为一个图像，这样我就可以在新窗口中打开它，因为我无法让flot在新窗口上工作。

I am currently using http://www.flotcharts.org/ for a graphing plugin. I am trying to achieve the ability to print a flot graph off a page surrounded by content. I am trying to open up a new window and print a canvas object so I can print JUST the flot graph and I have successfully done that. However, to do, that I need to make the canvas an image so I can open it in a new window because I could not get the flot to work on a new window.

canvas.toDataURL();

在Internet Explorer 8中我得到的错误是没有方法toDataURL（）。我相信这是因为Internet Explorer 8不支持canvas标记，而flot必须使用变通方法。那么如何从新浏览器和Internet Explorer 8中的页面打印刚才的flot图？

In internet explorer 8 I get the error that there is no method toDataURL(). I believe this is because internet explorer 8 does not support the canvas tag and flot must use a workaround. So how do I print JUST the flot graph from a page in new browsers and internet explorer 8?

推荐答案

我遇到了同样的问题当我试图打印flot chart时。打开新窗口的另一种方法是将画布移动到页面顶部并隐藏其他所有内容，打印，然后将所有内容放回原处。这应该适用于现代浏览器以及IE8。此外，这将保持您的外部样式和库（jquery / flot）被引用，因为它位于同一页面上。

I had the same problem when I was trying to print flot charts. An alternative to opening a new window is to move the canvas to the top of the page and hide everything else, print, then put everything back. This should work in modern browsers and also in IE8. Also, this will keep your external styles and libraries(jquery/flot) referenced since it is on the same page.

具有html结构：

<body>
    <div id="wrapper">
        <div id="some-element></div>
        <canvas id="my-canvas"></canvas>
        <button type="button" id="print-button">PRINT</button>
        <div id="some-other-element></div>
    </div>
</body>

和javascript函数：

and the javascript function:

function printContent(whatToPrint, priorSibling, afterSibling) 
{

    $('#wrapper').hide();//hide content wrapper inside of body

    //take what to print out of wrapper and place directly inside body
    $(whatToPrint).appendTo('body');

    window.print();//print the window

    //put everything back
    $('#wrapper').show();

    if (priorSibling != null) 
    {
        $(whatToPrint).insertAfter(priorSibling);
    }
    else if (afterSibling != null)
    {
        $(whatToPrint).insertBefore(afterSibling);
    }

}

和javascript打印按钮事件

and the javascript print button event

$('#print-button').click(function(){

    printContent($('#my-canvas'), $('#some-element'), null);

});

注意：在不使用系统对话框打印的情况下以chrome打印可能会使您的样式混乱。这只是铬。如果有人有解决方案，请告诉我。

NOTE: printing in chrome, without using system dialog printing, might mess with your styles. This is just chrome though. If anyone has a solution to that, let me know.

这篇关于在8中打印flot graph的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Flot