将Highcharts导出到jsPDF-CANVG错误

Question

I'm looking for a solution about highcharts export to PDF with jsPDF. I used this solution to export my graph as image to my pdf -> Export Highcharts to PDF (using javascript and local server - no internet connection)

It's working fine, but for some graph i could not generate the image because of this error :

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

Following, the canvas method throwing the error (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;
        }

Any first ideas about what could be make this error ?

Answer 1

Use this bower package:

"canvg-gabelerner": "*"

And make sure you include these 3 dependencies:

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

The canvg bower package is old. It was created because original repo was stored on Google code service (now dead).

I hope it helps! :)

Answer 2

It is one of the common issues in HighCharts. This is due to the wrapped text that is found within the <title></title> tag. This usually occurs if your axis labels are too long and they are wrapped to multiple lines. The simple way to resolve this error is to remove all the title elements before exporting to PDF. This doesn't affect any part of your chart.

To remove the title element within your chart container, use JQuery

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

Insert this line at the beginning of the exporting module. Now try to export and this will work fine.