Question

我正在寻找有关使用jsPDF将highcharts导出为PDF的解决方案。我使用此解决方案将我的图形导出为图像到我的pdf - ＆gt; 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

使用此凉亭套餐：

"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包已经过时了。它的创建是因为原始仓库存储在Google代码服务上（现已死机）。

我希望它有所帮助！：）

Answer 2

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

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

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

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

将Highcharts导出到jsPDF - canvg错误

2 个答案: