将Highcharts导出到jsPDF - canvg错误

Question

我正在寻找一个解决方案关于高表出口到jsPDF格式。我使用此解决方案将图形作为图像导出到我的pdf -> Export Highcharts to PDF (using javascript and local server - no internet connection)。

它工作得很好，但是对于一些图形，我无法生成图像，因为这个错误：

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;
        }

对于造成这个错误的原因有什么初步的想法吗？

Answer 1

使用此bower包：

"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代码服务上(现在已经死了)。

我希望它能有所帮助！:)

Answer 2

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

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

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

在导出模块的开头插入此行。现在尝试导出，这将很好地工作。