Highcharts getSVG（） - 保存HTML傳說

我試圖得到一個Highchart的SVG並保留CSS格式在返回的SVG，它表示的Highchart，因爲它是目前向用戶顯示的格式。Highcharts getSVG（） - 保存HTML傳說

目前，如果我使用getSVG()函數，那麼自定義HTML圖例顯示不正確。在下面的例子中，我使用這種方法並渲染了一個SVG元素並將其呈現在屏幕上以比較差異。

$(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()); 
}

這使得foreignObject元素裏面的傳說，允許適當的HTML渲染。但是，似乎這個對象不是按照我的想法渲染的。這些元素似乎被抵消並且不可見。在下面的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>

我已經先行一步，並創建了一個的jsfiddle（here）只是內部SVG foreignObject元素，看看它會呈現。雖然看起來原始圖表的圖例將通過絕對定位正確放置，但它們仍然不呈現。檢查內嵌樣式後，你可以看到foreignObject的第一個子元素具有絕對定位是地方本身foreginElement的容器外。我能夠通過手動更改該元素的內聯樣式來確認此操作，以便左側和頂部位置都爲0.

所以，我該如何獲取Highchart的SVG，因爲它當前呈現以及任何嵌入式HTMl，以便正確表示用戶正在看到的內容？

而且，因爲它僅獲取了HTML，而不是SVG getChartHTML不解決這個問題。

來源

2016-11-15 Dustin

Highcharts是添加foreginObject與未在的jsfiddle動態生成體元件 - 它是可見的和可能的觀看例如當導出SVG檢查在Chrome中。你可以從出口模塊覆蓋sanitizeSVG功能從創建foreginObject阻止。

演示：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); 
    });

唯一的問題，我可以看到的是，位置是絕對的，所以如果導出圖表否則放置在比身體的頂部，那麼傳說將關於放錯位置的導出圖表。

來源

2017-01-02 16:15:48

Highcharts getSVG（） - 保存HTML傳說

回答

相關問題