Question

<script>
   $(function () {


        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'funnel',
                marginRight: 100
            },
            title: {
                text: 'Sales funnel'
            },
            plotArea: {
                shadow: null,
                borderWidth: null,
                backgroundColor: null
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b> ({point.y:,.0f})',
                        color: 'black',
                        softConnector: true
                    },
                    neckWidth: '30%',
                    neckHeight: '25%'

                    //-- Other available options
                    // height: pixels or percent
                    // width: pixels or percent
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Unique users',
                data: [
                    ['Website visits',   15654],
                    ['Downloads',       4064],
                    ['Requested price list', 1987],
                    ['Invoice sent',    976],
                    ['Finalized',    846]
                ]
            }]
        });

        // Add the jQuery UI resizin
        var container = $('#container')[0];
        $('#resizer').resizable({
            // On resize, set the chart size to that of the 
            // resizer minus padding. If your chart has a lot of data or other
            // content, the redrawing might be slow. In that case, we recommend 
            // that you use the 'stop' event instead of 'resize'.
            resize: function() {
                chart.setSize(
                    this.offsetWidth - 20, 
                    this.offsetHeight - 20,
                    false
                );
            }
        });
    });
    </script>

我使用highcharts做了一个示例漏斗图，所以我不想使用highcharts导出功能。我需要使用div id获取下面图表的svg 下面的代码是图表的div部分，它将在这个div中呈现图表。

    <div id="container" style="height: 400px;">
    </div>



    using div id "container" i need to get svg of the chart.

Answer 1

如果您拥有getSVG个实例，可以使用名为chart的方法。

var svg = chart.getSVG();

参考的

http://api.highcharts.com/highstock#object-Chart

Answer 2

你可以通过使用$（'＃container .highcharts-container'）来简化它.html（）;

这将把整个svg作为字符串，你可以用它来播放。

您还可以扩展highcharts export js并使用以下函数

http://api.highcharts.com/highcharts#Chart.getSVG（）

Answer 3

除了Ricardo Alvaro Lohmann的答案外，我必须指出，尽管Highcharts getSVG()确实返回了现有图表的svg，但没有返回的结果完全相同在浏览器中生成的svg，它会更改几乎所有高度，宽度，x，y值中的缩放比例值，有时还会跳过y轴中的某些点。请检查snippet以查找不匹配的内容。

如果在单击按钮后通过在控制台中检查html vs svg（来自getSVG（））来比较svg的差异。如果您从右上角的按钮下载svg，也会发现不匹配，请注意下载的图片中的y轴值与浏览器中的y轴值。

可以使用highchart XMLSerializer生成的SVG来获得完全相同的SVG。

var svgDoms = document.getElementsByClassName('highcharts-root');
var serializer = new XMLSerializer();
var serializedSvgString = serializer.serializeToString(svgDoms[0]);

这将适用于我提供的代码段。

如何使用div id获取svg的highcharts？

3 个答案: