Highcharts getSVG（） - 凡例でHTML書式を維持する

Question

ハイチャートのSVGを取得し、返されたSVGのCSS書式を保持して、ユーザーに現在表示されているハイチャートを表すようにしようとしています。

現在、getSVG()機能を使用すると、カスタムHTML凡例が正しく表示されないようです。次の例では、このメソッドを使用してSVG要素をレンダリングし、それを画面上にレンダリングして違いを比較します。

Example：適切なHTMLのレンダリングを可能にするためのforeignObject要素の内側に伝説をレンダリング

$(function() { 

    Highcharts.chart('container', { 

     exporting: { 
      chartOptions: { // specific options for the exported image 

       plotOptions: { 
        series: { 
         dataLabels: { 
          enabled: true 
         } 
        } 
       } 
      }, 
      scale: 3, 
      fallbackToExportServer: false 
     }, 

     title: { 
      text: 'Offline export' 
     }, 
     legend:{ 
      useHTML: true, 
         navigation: { enabled: false }, 
         align: 'center', 
         verticalAlign: 'bottom', 
         symbolWidth: 0, 
         symbolHeight: 0, 
         labelFormatter: function() { 
          return '<ul><li>1</li><li>2</li></ul>'; 
         } 
     }, 

     subtitle: { 
      text: 'Click the button to download as PNG, JPEG, SVG or PDF' 
     }, 

     chart: { 
      type: 'area' 
     }, 

     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 

    }); 

    var chart = $('#container').highcharts(); 
    createSVGFromChart(chart, $('#svg')); 


}); 

function createSVGFromChart(chart, $target){ 
$target.html(chart.getSVG()); 
} 

。しかし、このオブジェクトは私が思ったようにレンダリングされていないようです。要素はオフセットされて見えません。以下のHTMLでの異物結果のさらなる検査：

<foreignObject x="0" y="0" width="200" height="200"> 
    <div class="highcharts-legend" style="position: absolute; left: 266px; top: 313px; opacity: 1;"> 
     <div style="position: absolute; left: 0px; top: 0px; opacity: 1;"> 
      <div style="position: absolute; left: 0px; top: 0px; opacity: 1;"> 
       <div class="highcharts-legend-item highcharts-area-series highcharts-color-0 highcharts-series-0" style="position: absolute; left: 8px; top: 3px; opacity: 1;"><span style="font-family: 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 12px; position: absolute; white-space: nowrap; color: rgb(51, 51, 51); font-weight: bold; cursor: pointer; margin-left: 0px; margin-top: 0px; left: 5px; top: 3px; fill: rgb(51, 51, 51);"><ul><li>1</li><li>2</li></ul></span></div> 
      </div> 
     </div> 
    </div> 
</foreignObject> 

私は先に行って、それがレンダリングどうなるか見るためにSVGの内部だけでのforeignObject要素でjsfiddle（here）を作成しました。元のチャートの凡例は、絶対的な配置によって適切に配置されているように見えますが、それでもレンダリングはしません。インラインスタイルを調べると、foreignObjectの最初の子要素がforeginElementのコンテナの外側に配置される絶対配置を持つことがわかります。これを確認するには、その要素のインラインスタイルを手動で変更して、左と上の両方の位置が0になるようにしました。

質問：ハイチャートのSVGを現在レンダリングしている埋め込まれたHTMlとともに、ユーザーが見ているものを適切に表現できるようにします。

また、getChartHTMLではSVGではなくHTMLのみを取得するため、この問題は解決しません。

Answer 1

ハイチャートは、JSFiddleで動的に生成されないbody要素をforeginObjectに追加しています。たとえば、表示したときに表示され、エクスポートされたSVGで検査することができます。 ChromeでforeginObjectを作成しないようにするには、エクスポートモジュールからsanitizeSVG関数をオーバーライドすることができます。

デモ：http://jsfiddle.net/2juxcnsy/

var preventDefaultSVGgetting = false, 
     orygFun = Highcharts.Chart.prototype.sanitizeSVG; 
    Highcharts.Chart.prototype.sanitizeSVG = function(svg, b) { 
    return preventDefaultSVGgetting ? svg : orygFun(svg, b) 
    }; 

    // the button handler 
    $('#button').click(function() { 
    var svg; 

    preventDefaultSVGgetting = true; 
    svg = chart.getSVG(); 
    preventDefaultSVGgetting = false; 

    $('#containerContainer').prepend(svg); 
    }); 

私が見ることができる唯一の問題は、その位置が絶対的であるため、エクスポートされたチャートが他のどこ本体の上面よりも配置されている場合、その伝説はとの関係で紛失されますエクスポートされたグラフ。