HighChart Title text implemented HTML Style is not

问题:

I have added <br/> and   HTML tags in HighChart titles. I can see that style changes in chart view but when we exporting into PNG, JPEG images... Text style was unable to apply in the exported images. Please refer sample images below

Please refer the JSFiddle - http://jsfiddle.net/uXg9t/172/

Chart View:

Exported View:

Any suggestion to export Title as given in the Chart View.

回答1:

Answer of @Halvor Strand hits the home, but additionally there is need to change the title structure, because SVG won't generate correctly during exporting. It's happening because </br>'s, but to solve this problem, for example you can place every title line in different <span> element with style="display: block;" set on it. Take a look on the code:

    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"
        }
    }

Live example: http://jsfiddle.net/m052y9ud/

回答2:

You can set allowHTML to true, which is an experimental feature for exporting. API says:

allowHTML: Boolean Since 4.1.8

Experimental setting to allow HTML inside the chart (added through the useHTML options), directly in the exported image. This allows you to preserve complicated HTML structures like tables or bi-directional text in exported charts.

Disclaimer: The HTML is rendered in a foreignObject tag in the generated SVG. The official export server is based on PhantomJS, which supports this, but other SVG clients, like Batik, does not support it. This also applies to downloaded SVG that you want to open in a desktop client.

Defaults to false.

In your case, it can look something like this (JSFiddle):

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