Текст заголовка HighChart реализован HTML стиль не применяется при экспорте файлов

Question

Я добавил теги <br/> и   в заголовки HighChart. Я вижу, что стиль меняется в виде диаграммы, но при экспорте в PNG, изображения JPEG ... Стиль текста не удалось применить в экспортированных изображениях. Пожалуйста, ознакомьтесь с образцами изображений ниже

Пожалуйста, обратитесь к JSFiddle - http://jsfiddle.net/uXg9t/172/

График:

Просмотр экспорта:

Любое предложение экспортировать заголовок, как указано в представлении диаграммы.

Answer 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/

Answer 2

Вы можете установить allowHTML на true, что является экспериментальной функцией для экспорта. API говорит:

allowHTML: Boolean С 4.1.8

Экспериментальная настройка, позволяющая использовать HTML внутри диаграммы (добавляется с помощью параметров useHTML) непосредственно в экспортированном изображении. Это позволяет сохранять сложные структуры HTML, такие как таблицы или двунаправленный текст, в экспортированных диаграммах.

Отказ от ответственности: HTML-код отображается в теге foreignObject в сгенерированном SVG. Официальный сервер экспорта основан на PhantomJS, который поддерживает это, но другие клиенты SVG, такие как Batik, не поддерживают его. Это также относится к загруженному SVG, который вы хотите открыть в настольном клиенте.

По умолчанию false.

В вашем случае это может выглядеть примерно так ( JSFiddle ):

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