HighChart 标题文本实现的 HTML 样式不适用于导出文件答案

【问题标题】：HighChart Title text implemented HTML Style is not applying in exporting filesHighChart 标题文本实现的 HTML 样式不适用于导出文件
【发布时间】：2018-08-28 16:52:53
【问题描述】：

我在 HighChart 标题中添加了 <br/> 和 &nbsp; HTML 标签。我可以在图表视图中看到样式发生了变化，但是当我们导出为 PNG、JPEG 图像时……文本样式无法应用于导出的图像。请参考下面的示例图片

请参考 JSFiddle - http://jsfiddle.net/uXg9t/172/

图表视图：

导出的视图：

导出图表视图中给出的标题的任何建议。

【问题讨论】：

标签： javascript html css highcharts styles

【解决方案1】：

@Halvor Strand 的答案很重要，但另外需要更改标题结构，因为 SVG 在导出期间不会正确生成。这是因为</br> 的原因，但是为了解决这个问题，例如，您可以将每个标题行放在不同的<span> 元素中，并在其上设置style="display: block;"。看代码：

    title: {
        useHTML: true,
        text: '<span style="display: block;">Header Text in Line1</span><span style="display: block;">Line 2 Text</span><span style="display: block;">Line 3 Text</span>',
        style: {
            "text-align": "center"
        }
    }

现场示例： http://jsfiddle.net/m052y9ud/

【讨论】：

【解决方案2】：

您可以将allowHTML 设置为true，这是用于导出的实验性功能。 API 说：

allowHTML: Boolean 从 4.1.8 开始

实验性设置允许图表内的 HTML（通过useHTML 选项添加），直接在导出的图像中。这允许您在导出的图表中保留复杂的 HTML 结构，例如表格或双向文本。

免责声明：HTML 在生成的 SVG 中以 foreignObject 标记呈现。官方的导出服务器是基于 PhantomJS 的，它支持这个，但是其他的 SVG 客户端，比如 Batik，不支持它。这也适用于您想要在桌面客户端中打开的已下载 SVG。

默认为false。

在你的情况下，它可能看起来像这样 (JSFiddle)：

$('#container').highcharts({
    // ...
    exporting: {
        enabled: true,
        allowHTML: true,
        chartOptions: {
            // ...
        }
    }
});

【讨论】：