Highcharts getvg() -保持HTML格式在图例中

Highcharts getSVG() - Keep HTML formatting in legend

本文关键字：格式 HTML 保持 getvg Highcharts      更新时间：2023-09-26

我正在尝试获得Highchart的SVG，并保留返回SVG中的CSS格式，以便它代表Highchart，因为它当前显示给用户。

目前，似乎如果我使用getvg()函数，那么自定义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>

我已经在SVG中创建了一个带有foreignObject元素的jsfiddle(在这里)，以查看它将呈现什么。虽然原始图表的图例似乎可以通过绝对定位正确地放置，但它们仍然没有渲染。在检查了内联样式之后，您可以看到foreignObject的第一个子元素有一个绝对定位，它将自己置于foreginElement的容器之外。我能够通过手动更改该元素的内联样式来确认这一点，以便左侧和顶部位置都为0。

所以问题是，我如何去获得Highchart的SVG，因为它目前与任何嵌入的HTMl一起呈现，以便它正确地代表用户所看到的?

另外，getChartHTML不能解决这个问题，因为它只获取HTML，而不是SVG。

Highcharts正在添加foreginObject与body元素，这不是在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);
  });

我能看到的唯一问题是位置是绝对的，所以如果导出的图表被放置在正文顶部以外的地方，那么图例将被放置在相对于导出的图表的错位。

相关文章：