jsPDF添加图表 [英] jsPDF add chart

问题描述

我正在使用jsPDF通过Appcelerator的Titanium生成PDF文档。现在我需要添加一个包含两个段的简单饼图。我怎么能以最简单的方式做到这一点？

I am using jsPDF to generate PDF documents through Appcelerator's Titanium. Now i need to add a simple pie chart with two segments. How could i do that in simplest way?

它不需要任何花哨的东西。我正在考虑首先生成图像，并将该图像添加到文档中。也许有一个库可以生成饼图的图像并将其保存到手机中。但是，我不确定jsPDF对图像的支持，我似乎无法找到任何好的文档库。

It doesn't need to be anything fancy. I am thinking about generating an image first, and add that image to the document. Maybe there's a library that could generate images of pie-chart's and save it to the phone. However, im not sure about jsPDF's support of images, i can't seem to find any good documentation of the library.

推荐答案

我知道它已经闲置了近一年，但由于它没有接受的答案，我会尝试回答。

I know it has been inactive for almost a year, but since it doesn't have an accepted answer, I'll try to answer.

添加图表到jsPDF

1.使用HTML Canvas将图表转换为支持的图像格式（在base64中编码的JPEG或PNG）。

1.Convert chart to supported image format (JPEG or PNG encoded in base64) using HTML Canvas.

2.确保addImage函数可用的图像URL。

2.Make sure the image URL available to the addImage function.

下面是一个将图像添加到jsPDF doc的示例必须包含原始base64代码。它取自jsPDF示例。

Below is an example to add image to jsPDF doc without having to include raw base64 code. It is taken from jsPDF example.

function demoImages() {
    // Because of security restrictions, getImageFromUrl will
    // not load images from other domains.  Chrome has added
    // security restrictions that prevent it from loading images
    // when running local files.  Run with: chromium --allow-file-access-from-files --allow-file-access
    // to temporarily get around this issue.
    var getImageFromUrl = function(url, callback) {
        var img = new Image(), data, ret = {
            data: null,
            pending: true
        };

        img.onError = function() {
            throw new Error('Cannot load image: "'+url+'"');
        };
        img.onload = function() {
            var canvas = document.createElement('canvas');
            document.body.appendChild(canvas);
            canvas.width = img.width;
            canvas.height = img.height;

            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            // Grab the image as a jpeg encoded in base64, but only the data
            data = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
            // Convert the data to binary form
            data = atob(data);
            document.body.removeChild(canvas);

            ret['data'] = data;
            ret['pending'] = false;

            console.log("data",data);

            if (typeof callback === 'function') {
                callback(data);
            }
        };
        img.src = url;

        return ret;
    };

    // Since images are loaded asyncronously, we must wait to create
    // the pdf until we actually have the image data.
    // If we already had the jpeg image binary data loaded into
    // a string, we create the pdf without delay.
    var createPDF = function(imgData) {
        var doc = new jsPDF();

        doc.addImage(imgData, 'JPEG', 10, 10, 50, 50);
        doc.addImage(imgData, 'JPEG', 70, 10, 100, 120);

        doc.save('output.pdf');

    }

    getImageFromUrl('thinking-monkey.jpg', createPDF);
}

jsPDF的良好文档

您将从 实用文档 。例如源代码，不要从GitHub下载，因为缺少某些文件。您可以从这里下载。 >

注意：删除basic.js的第312行上的分号以使代码正常工作。

note:remove semicolon on the 312th line of basic.js to make the code works.

干杯，......

这篇关于jsPDF添加图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！