Hichcharts - Пользовательская легенда css не отображается в функции загрузки диаграммы печати - PullRequest
0 голосов
/ 27 января 2020

Я хочу использовать пользовательскую легенду на графике. Так что добавили css в соответствии с требованием визуализации пользовательских легенд. Это отображается правильно в Интернете. Но когда я пытаюсь загрузить его, используя опцию Print Chart , он не отображает пользовательский дизайн легенды в загруженном документе. В других вариантах загрузки работает нормально, кроме Print Chart . Я пробовал много решений, но ничего не работает. Даже я пробовал с примером Highcharts jsfiddle также с пользовательской легендой, это не работает. Пожалуйста, ознакомьтесь с примером здесь. https://jsfiddle.net/DipaliShinde/ep73vqun/1/ (В этом примере не отображается css, как ожидалось для Series1 легенда с цветом фона)

Highcharts.chart('container', {
exporting: {
    chartOptions: { // specific options for the exported image
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                }
            }
        }
    },
    fallbackToExportServer: false
},

title: {
    text: 'Offline export'
},
legend: {
        enabled: true,
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            align: 'right',
            useHTML: true,
            floating: false,
            verticalAlign: 'middle',
            x: -40,
            y: 10,
            //maxHeight: 320,
            itemMarginBottom: 20,
    labelFormatter: function () {

                return '<div><div style="padding-right: 5px;color: #666666;text-align:center;">Text 123<span style="padding-left: 5px;font-size: 12px;font-weight: 300;color: #999999;">(16.78%)</span></div>' +
                    '<div style="background:' + this.color + ';height:20px; width:120px;text-align:center;color:white;font-weight:300;font-size: 10px;line-height:20px;">'
                    + this.name + '</div></div>';
            }
},
subtitle: {
    text: 'Click the button to download as PNG, JPEG, SVG or PDF'
},

chart: {
    type: 'area'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

});

Пожалуйста, помогите мне решить эту проблему.

Спасибо

Ответы [ 2 ]

0 голосов
/ 27 января 2020

С разрешением HTML, он работает для всех опций загрузки, кроме печати диаграммы. Для диаграммы печати ее не рендеринг легенды, как и другие варианты загрузки. Прикрепленный здесь снимок экрана.

Распечатка таблицы Legend Issue

0 голосов
/ 27 января 2020

Можно включить экспериментальную опцию allowHTML, но без онлайн-сервера экспорта она работает только для векторного изображения SVG. Вы можете найти больше информации здесь: https://github.com/highcharts/highcharts/issues/5985

exporting: {
    allowHTML: true,
    chartOptions: {...},
    //fallbackToExportServer: false
}

Демонстрационная версия: https://jsfiddle.net/BlackLabel/2nvpfgyo/

Справочник по API: https://api.highcharts.com/highcharts/exporting.allowHTML

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...