1

我成功地获取 Chart.js 输出并将其发送到图像文件 (png) 和 pdf。问题在于，两种输出的图像质量都远低于浏览器中的图表。png 文件勉强可以接受，而 pdf 则非常粗糙。是否有另一种方法可以从 Chart.js 生成与浏览器中具有相同视觉质量的输出？

这是我输出到 png 的方式：

    var a = document.createElement('a');
    a.href = myChart.toBase64Image();
    a.download = 'Site 1 - Users Per Department.png';
    a.click();

png 输出

这是我输出到pdf的方式：

    $('#create_PDF_btn').on('click', function() {
        var canvas = document.querySelector("#myChart");
        var canvas_img = canvas.toDataURL("image/png",1.0); 
        var pdf = new jsPDF('landscape','in', 'letter');
        pdf.addImage(canvas_img, 'png', .5, 1.75, 10, 5); 
        pdf.save('Site 1 - Users Per Department.pdf')
    });

对 PDF 的另一项观察是，此代码生成的文件比我预期的要大得多 - 4,700 KB 与 21 KB（从我当前在 MS Access 中的解决方案输出到 pdf）。我无法添加 pdf，所以我在此处包含图像的副本。注意文本和图例点中的颗粒度：

PDF输出

我正在使用相对较新的 Chart.js (3.4.1) 和 jsPDF (1.5.3) 版本。

感谢您的任何意见。

4

0 回答 0