Place Highstock inside a SVG

问题

can you help me to place a Highchart inside a SVG element instead of an HTML . Cascaded elements work fine. I have already done it with the jquery SVG plot. But Highchart throws an error 13. What can i do?

Kind regards

Markus Breitinger

回答1:

You can generate chart in div, which will have negative margin. Then use getSVG() function and paste it ot svg element.

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

回答2:

Unfortunately it is not suppored, highcharts renders the chart in additional divs and adds elements like labels/datalabels as html objects.

But you can copy the SVG of highstock in you SVG. But you will lose all attached events. Like drag and drop, click ....

Here an Example of it. http://jsfiddle.net/L6SA4/10/

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create a hidden and not attached div container.
        var div = $('<div>This is an hidden unatached container.</div>');

        // Create the chart
        div.highcharts('StockChart', {

            chart: {
                width: 480,
                height: 400,
                events: {
                    load: function () {
                        // If hidden div was generated, take the svg content and put it into svg.
                        var stockSvg = $('svg', this.container);

                        var svgObj = $('#mySvg').svg();

                        // Force position of highstock
                        stockSvg.attr('x', 20);
                        stockSvg.attr('y', 30);

                        // Replace ugly rect with highstock
                        $('#container', svgObj).replaceWith(stockSvg); 
                    }
                }
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });        

    });

来源：https://stackoverflow.com/questions/17678656/place-highstock-inside-a-svg

标签

svg

Highcharts