将Highstock置于SVG内

时间:2013-07-16 14:01:51

标签: svg highcharts

你能帮我把Highchart放在一个SVG元素而不是HTML中吗?级联元素工作正常。我已经使用jquery SVG绘图完成了它。但是Highchart会抛出错误13.我该怎么办?

亲切的问候

Markus Breitinger

2 个答案:

答案 0 :(得分:1)

您可以在div中生成图表,这将具有负边距。然后使用getSVG()函数并将其粘贴到svg元素。

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

答案 1 :(得分:0)

不幸的是,它没有被支持,highcharts在其他div中呈现图表,并添加标签/数据标签等元素作为html对象。

但是你可以在你的SVG中复制highstock的SVG。但是你将失去所有附加事件。 像拖放一样,单击....

这里有一个例子。 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
                }
            }]
        });        

    });