Question

我调查了很多地方flot issue，chart comparision，stackoverflow ans，而且这些地方都没有完全可能。通过this answer，似乎可以使用 html2canvas ，但是它有一个angularjs插件吗？

任何人都可以帮我找到将flot图表导出为pdf的方法吗？

Plunker example有我的图表和按钮处理程序用于导出。

只是为了plunker链接我正在显示我的点击处理程序

<button type="button" class="btn btn-default btn-xs" ng-click="exportPdf($event)">Export to PDF</button>

$scope.exportPdf = function($event) {
  alert("Export to pdf click handler");
}

Answer 1

不是您正在寻找的确切答案。我知道Flot很快并适用于许多低端浏览器，但是Flot在转换为图像或pdf方面存在一些问题，因为传说不是画布的一部分，而是html的一部分。但是，您可以将其导出到没有图例的图像。

关于pdf导出，canvas无法转换为功能齐全的pdf，但svg是。由于Flot仅使用画布，因此只能正确转换为图像。

function canvas2Image() {
  var dataURL = document.querySelector("canvas").toDataURL();
  document.getElementById('my-img').src = dataURL;
}

http://plnkr.co/edit/FYW2wj?p=preview

我建议您切换到Highcharts，它提供所有类型的导出。 http://api.highcharts.com/highcharts#exporting.type

我一直在使用Highcharts，这很令人满意。

Answer 2

实际上要详细说明allen kim的解决方案 - 有将Float转换为Image然后转换为PDF的选项

请参阅Stackoverflow上的以下问题：

Saving flot chart to image or pdf

Answer 3

Flot在HTML5元素上绘制图形。所以可能的情况可能如下：

使用toDataURL作为
从画布中检索图像数据
var canvas = document.getElementById（“mycanvas”）;

var img = canvas.toDataURL（“image / png”）;
使用jsPDF创建PDF，使用第一个示例中的addImage将图像嵌入其中。

有没有办法将Flot图表导出为pdf？

3 个答案: