将Highstock放置在SVG中

Question

您能帮我将Highchart放置在SVG元素中而不是HTML中。级联元素正常工作。我已经完成了jQuery SVG图。但Highchart抛出一个错误13.我能做什么？

亲切的问候

马库斯Breitinger

Answer 1

您可以生成图表DIV，这将有负面保证金。然后使用getSVG（）函数并将其粘贴到svg元素中。

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

Answer 2

不幸的是它不扶持产品，highcharts使得在额外的div图表，并添加如标签/ datalabels为html对象的元素。

但是，您可以将SVG的SVG复制到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 
       } 
      }] 
     });   

    });