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

4 回答 4

5

如果您有实例getSVG，可以使用一种方法。chart

var svg = chart.getSVG();

参考

于 2012-12-03T09:51:13.343 回答
1

您可以获取highcharts使用容器的实例，然后getSVG()在其上调用方法。从您问题中的示例中，它将如下所示：

$('#container').highcharts().getSVG();

参考 http://api.highcharts.com/highcharts#Chart.getSVG

于 2015-11-23T10:51:41.477 回答
0

您可以使用 $('#container .highcharts-container').html();

这会将整个 svg 作为字符串，您可以使用它来播放。

您还可以获得扩展 highcharts 导出 js 并使用以下功能

http://api.highcharts.com/highcharts#Chart.getSVG ()

于 2012-12-03T09:55:04.420 回答
0

除了Ricardo Alvaro Lohmann'答案，我必须指出，虽然 HighchartsgetSVG()确实返回了现有图表的 svg，但它并没有返回在浏览器中生成的完全相同的 svg，它改变了几乎所有高度、宽度的缩放值， x, y 的值，有时它也会跳过 y 轴上的一些点。请检查代码段以查找不匹配项。

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

为了获得与 highchart 生成的完全相同的 SVG，XMLSerializer可以使用。

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

这将适用于我提供的片段。

于 2020-04-13T09:37:42.937 回答