Conver高图到SVG

Question

我想将下面的图表转换为SVG，以便我可以将其与其他内容一起导出为PDF / PPT。 click here to see the demo chart 我知道我有高图导出，但我不能使用它，因为除了图表之外我还有别的东西，因为某些安全原因，html2canvas不是一个选项。

function _getDiamondGraphLabel(head, body, lvl, positionLeft, primeColor) {
                    var positionedTopClass = '',
                        headFormatted = '',
                        bodyFormatted = '',
                        positionedLeftClass = '';

                    if (lvl) {
                        positionedTopClass = 'diamond-graph-label-lvl-' + lvl;
                    }

                    if (positionLeft) {
                        positionedLeftClass = 'diamond-graph-label-left';
                    }

                    headFormatted = '<div class="diamond-graph-head-label">' + head + '</div>';
                    bodyFormatted = '<div class="diamond-graph-body-label"><b>' + body + '</b></div>';

                    var retVal = '<div ' + (primeColor ? 'style="border-color: ' + primeColor + '; border-width: 3px"' : '') + ' class="diamond-graph-label ' +
                        positionedTopClass + ' ' + positionedLeftClass + '""><div class="diamond-graph-label-content" ' +
                        (primeColor ? 'style="background-color: ' + primeColor + ' ; color: white"' : '') + '>' + headFormatted + bodyFormatted + '</div></div>';

                    return retVal;
                }

var min = 49560,
    per10 = 49560,
  per25 = 63560,
  per75 = 102537,
  per90 = 119537,
  median = 83362,
  average = 89142,
  max = 119537,
  counter = 0;
var tickerPositions = [min, per10, per25, per75, per90, median, average, max];
chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'columnrange',
                        inverted: true,
                        plotBackgroundColor: '#e9e9e9',
                        height: 25,
                        plotHeight: 60,
                        width: $('#container')[0].clientWidth,
                        spacing: [0, 0, 0, 0]
                    },
                    title: {
                        text: ''
                    },
                    xAxis: {
                        tickLength: 0,
                        labels: {
                            enabled: false
                        }
                    },
                    yAxis: {
                        tickPositions: tickerPositions,
                        labels: {
                            useHTML: true,
                            formatter: function () {
                                // There is a bug in Highcharts that formatter is calling twice. (reset if the value is higher than tickers length)
                                if (counter >= tickerPositions.length) {
                                    counter = 0;
                                }

                                counter++;

                                switch (counter) {
                                    case 2:
                                        return _getDiamondGraphLabel('10th', this.value, 0, false, '#000');

                                    case 3:
                                        return _getDiamondGraphLabel('25th', this.value, 1, false, '#000');

                                    case 4:
                                        return _getDiamondGraphLabel('75th', this.value, 1, true, '#000');

                                    case 5:
                                        return _getDiamondGraphLabel('90th', this.value, 0, true, '#000');

                                    case 6:
                                        return _getDiamondGraphLabel("Median", this.value, 2, average < median, "#000");

                                    case 7:
                                        return _getDiamondGraphLabel("Average", this.value, 2, average > median, '#000');

                                    default:
                                        return '<div></div>';
                                }
                            }
                        },
                        title: {
                            text: null
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    tooltip: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    plotOptions: {
                        columnrange: {
                            grouping: false,
                            borderWidth: 0,
                            pointPadding: 0,
                            groupPadding: 0
                        }
                    },
                    series: [{
                        name: 'MinTo10th',
                        stack: 'DIAMOND_STACK',
                        data: [{
                            x: 0,
                            low: min,
                            high: per10
                        }],
                        color: '#ebebeb'
                    }, {
                        name: '10thTo25th',
                        stack: 'DIAMOND_STACK',
                        data: [{
                            x: 0,
                            low: per10,
                            high: per25
                        }],
                        color: '#bbbbbb'
                    }, {
                        name: '25thTo75th',
                        stack: 'DIAMOND_STACK',
                        data: [{
                            x: 0,
                            low: per25,
                            high: per75
                        }],
                        color: '#6a6a6a'
                    }, {
                        name: '75thTo90th',
                        stack: 'DIAMOND_STACK',
                        data: [{
                            x: 0,
                            low: per75,
                            high: per90
                        }],
                        color: '#bbbbbb'
                    }, {
                        name: '90thToMax',
                        stack: 'DIAMOND_STACK',
                        data: [{
                            x: 0,
                            low: per90,
                            high: max
                        }],
                        color: '#ebebeb'
                    }, {
                        name: 'median',
                        stack: 'DIAMOND_STACK',
                        data: [{
                            x: 0,
                            low: median,
                            high: median + 1
                        }],
                        color: '#1a8099'

                    }, {
                        name: 'average',
                        stack: 'DIAMOND_STACK',
                        data: [{
                            x: 0,
                            low: average,
                            high: average + 1
                        }],
                        color: '#006699'
                    }]
                });

有人可以帮助我。 提前谢谢。