当我们使用 CanVG 导出到 PNG 时，多行标题不起作用 - Highcharts

问题描述

我正在创建一个 highchart 示例，我想将图表导出为 PNG 格式。下载 PNG 图片时，它的显示方式与图表上的显示方式不同。

我尝试了各种方法来添加标题行，但没有一种方法适合我。

下面是添加标题行的不同尝试

> 1. "text":"<p>Header Line Text</p><p>Line 2</p>Line 3"
> 2. "text":"<span style="display:block">Header Line Text</span><span style="display:block">Next Line</span>Line 3"
> 3. "text":"Header Line Text<br>Line 2<br>Line 3"

请在这个 JSfiddle 中找到我的示例代码 http://jsfiddle.net/deepakpookkote/7jgc1nyq/5/

请帮我解决这个问题或推荐一种方法。

解决方法

从 "useHTML":true 中移除参数 "useHTML":false（或设置 "title":{}）。此外，删除 <p> 标记，使用 <br> 标记生成此格式：

"text": "Header Line Text<br>Line 2<br>Line 3"

完整：

"title":{
      "style":{
         "fontFamily":[
            "Arial Narrow"
         ],"fontSize":"12pt","margin-left":"100px","wordWrap":"break-word","text-align":"center"
      },"align":"center","text":"Header Line Text<br>Line 2<br>Line 3","margin":10
   }

在 DOM 输出时，每一行（标题行文本、第 2 行、第 3 行）都将包含在一个 <tspan> 标记中。

此外，参数中指定的样式将应用于父 <text> 标记。