Question

在this chart中，我必须将x轴标签分成两行

xAxis: {
    labels: {
        useHTML: true
    },
    categories: ['unter 1.000 €', '1.000 bis <br /> 1.499 €', '1.500 bis <br /> 1.999 €', '2.000 bis <br /> 2.499 €', '2.500 bis <br /> 2.999 €', '3.000 bis <br /> 3.999 €', '4.000 bis <br /> 4.999 €', '5.000 €  <br /> und mehr']
},

它在浏览器中运行良好，但是当我将其导出为SVG（或其他格式）时，它会以这种方式显示： chart as SVG

我该如何解决？

Answer 1

如"Labels and string formatting"文档中所述：

在Highcharts中处理文本的大多数地方，后面跟着一个名为useHTML的选项......

缺点是它总是在所有其他SVG内容之上布局，并且在导出的图表中不会以相同的方式呈现。

解决方法是使用“allow html”补丁进行导出，并设置export.allowHTML: true。这在this GitHub issue中提到。

您可以使用以下代码添加补丁：

/**
 * This snippet adds support for useHTML in exported charts, opening for advanced
 * HTML features like positioning, tables, layout etc. Images will probably not
 * work well because the server doesn't know how to preload them.
 * Note that the rendering agent needs to support the SVG foreignObject tag. The 
 * featured Highcharts export server is based on PhantomJS which supports this. Other 
 * SVG renderers, like Batik or Inkscape, do not support it.
 */
(function (H) {
    H.wrap(H.Chart.prototype, 'init', function (proceed, options, callback) {
        if (options.chart && options.chart.forExport) {
            options.chart.forExport = options.exporting.allowHTML !== true;
        }
        proceed.call(this, options, callback);        
    });
    H.wrap(H.Chart.prototype, 'sanitizeSVG', function (proceed, svg) {

        // Move HTML into a foreignObject
        var html = svg.match(/<\/svg>(.*?$)/);
        if (html) {
            html = '<foreignObject x="0" y="0 width="200" height="200">' +
                '<body xmlns="http://www.w3.org/1999/xhtml">' +
                html[1] +
                '</body>' + 
                '</foreignObject>';

            svg = svg.replace('</svg>', html + '</svg>');
        } 
        return proceed.call(this, svg);

    });
}(Highcharts));

然后将这段代码添加到图表选项中：

exporting: {
    allowHTML: true
}

请参阅this updated JSFiddle demonstration了解图表的工作原理。

换行轴标签导出到SVG

1 个答案: