如何将Jquery Flot折线图导出为图像或PDF？

Question

如何导出 Jquery Flot折线图，包括轴和标题。 但我想使用JavaScript导出它，我正在使用API​​ Link填充图表。

下面是图表的图像。

Answer 1

创建一个id为＆＃34的按钮;保存＆＃34;，然后使用下面的代码尝试此插件

＆＃13;

＆＃13;

function demoFromHTML() {
    var pdf = new jsPDF('l', 'pt', 'letter');
    source = $('section.panel')[0];
    specialElementHandlers = {
        '#bypassme': function (element, renderer) {
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        pdf.save('graph.pdf');
    }, margins);
}

＆＃13;

<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="panel panel-default">
    <header class="panel-heading font-bold">Photo Statistics 2015 
    </header>
    <div class="panel-body">
        <div id="flot-1ine2" style="height:275px"></div>
    </div>
</section>
<button onclick="demoFromHTML()">Save as PDF</button>

＆＃13;

＆＃13;

＆＃13;

编辑：或者如果png可以接受：

＆＃13;

＆＃13;

html2canvas([document.getElementById('mydiv')], {
    onrendered: function (canvas) {
        document.getElementById('canvas').appendChild(canvas);
        var data = canvas.toDataURL('image/png');
        // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

        var image = new Image();
        image.src = data;
        document.getElementById('image').appendChild(image);
    }
});

＆＃13;

#mydiv {
    background-color: lightblue;
    width: 200px;
    height: 200px
}

＆＃13;

<div id="mydiv">
    <section class="panel panel-default">
        <header class="panel-heading font-bold">Photo Statistics 2015 
        </header>
        <div class="panel-body">
            <div id="flot-1ine2" style="height:275px"></div>
        </div>
    </section>
</div>
<br>
<br>
    
<div id="canvas">
    <p>Canvas:</p>
    </div>
    
    <div id="image">
        <p>Image:</p>
    </div>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

＆＃13;

＆＃13;

＆＃13;