1

我正在寻找关于使用 jsPDF 将 highcharts 导出为 PDF 的解决方案。我使用这个解决方案将我的图表作为图像导出到我的 pdf ->将 Highcharts 导出到 PDF（使用 javascript 和本地服务器 - 没有互联网连接）

它工作正常，但是对于某些图形，由于此错误，我无法生成图像：

Uncaught TypeError: undefined is not a function -- canvg.js:2000
svg.Element.text.getAnchorDelta -- canvg.js:2010
svg.Element.text.renderChild -- canvg.js:1989
svg.Element.text.renderChildren -- canvg.js:679
svg.Element.ElementBase.render -- canvg.js:698
svg.Element.ElementBase.renderChildren -- canvg.js:679
svg.Element.ElementBase.render -- canvg.js:698
svg.Element.ElementBase.renderChildren -- canvg.js:679
svg.Element.ElementBase.render -- canvg.js:2723
svg.loadXmlDoc.draw -- canvg.js:2733
svg.loadXmlDoc -- canvg.js:2646
svg.loadXml -- canvg.js:62
canvg -- indicateurs.js:3237
$.bind.H.Chart.createCanvas -- indicateurs.js:3171
(anonymous function) -- jquery-1.10.2.min.js:4
x.extend.each -- indicateurs.js:3164
_indicateurs.hightcharts.graph_to_pdf -- indicateurs.js:3262
(anonymous function) -- jquery-1.10.2.min.js:5
x.event.dispatch -- jquery-1.10.2.min.js:5
x.event.add.v.handle

以下是引发错误的canvas方法（canvg.js）：

        this.getAnchorDelta = function (ctx, parent, startI) {
            var textAnchor = this.style('text-anchor').valueOrDefault('start');
            if (textAnchor != 'start') {
                var width = 0;
                for (var i=startI; i<parent.children.length; i++) {
                    var child = parent.children[i];
                    if (i > startI && child.attribute('x').hasValue()) break; // new group
                    width += child.measureTextRecursive(ctx);       // ######## PROBLEM LOCATED ON THIS LINE
                }
                return -1 * (textAnchor == 'end' ? width : width / 2.0);
            }
            return 0;
        }

关于可能导致此错误的任何初步想法？

4

2 回答 2

2

这是 HighCharts 中的常见问题之一。<title></title>这是由于在标记中找到的换行文本。如果您的轴标签太长并且它们被包裹成多行，通常会发生这种情况。解决此错误的简单方法是title在导出为 PDF 之前删除所有元素。这不会影响图表的任何部分。

要删除图表容器中的标题元素，请使用JQuery

("#chart_container_id title").remove();

在导出模块的开头插入这一行。现在尝试导出，这将正常工作。

于 2017-09-19T11:05:40.623 回答
2

使用这个凉亭包：

"canvg-gabelerner": "*"

并确保包含以下 3 个依赖项：

<script src="bower_components/canvg-gabelerner/rgbcolor.js"></script>
<script src="bower_components/canvg-gabelerner/StackBlur.js"></script>
<script src="bower_components/canvg-gabelerner/canvg.js"></script>

canvg bower 包很旧。创建它是因为原始 repo 存储在 Google 代码服务（现已失效）上。

我希望它有帮助！:)

于 2015-07-10T16:52:00.657 回答