Высокие диаграммы не экспортируют пользовательские элементы SVG, добавленные после создания

Question

Я работаю с Highcharts 6.0.7 в React, в частности, я добавляю SVG-элементы на диаграмму, используя объект chart.renderer, после создания диаграммы, а не в обратном вызове конструктора. Проблема в том, что когда я пытаюсь экспортировать диаграмму, либо онлайн, либо офлайн модуль не экспортирует пользовательский SVG.

Мне нужно решение этой проблемы, потому что мой клиент хочет рисовать аннотации и линии внутри графика.

Я прилагаю jsfiddle пример этого .

// create the chart
var chart = Highcharts.chart('container', {
    chart: {
        events: {
            redraw: function () {
                var label = this.renderer.label('The chart was just redrawn', 100, 120)
                    .attr({
                        fill: Highcharts.getOptions().colors[0],
                        padding: 10,
                        r: 5,
                        zIndex: 8
                    })
                    .css({
                        color: '#FFFFFF'
                    })
                    .add();

            }
        }
    },
    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, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});


// activate the button
$('#button').click(function () {
    chart.addSeries({
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    });

    $('#button').off('click');
});

Answer 1

Вам нужно оставить параметры «оставленными пользователем» и воссоздать фигуры / метки в событии загрузки диаграммы экспорта с этими сохраненными параметрами. В зависимости от того, что пользователь может сделать на диаграмме, сохранение параметров может быть сложным, но для простых форм / надписей все сводится к сохранению параметров attrs и css.

// the labels storage
const customLabels = []

// a util for creating a label and saving its options
function createLabel (renderer, { args, attr, css }) {
   const label = renderer.label(...args).attr(attr).css(css).add()

   label.userOptions = { args, attr, css}

   return label
}

const chart = Highcharts.chart('container', {
    chart: {
        events: {
            redraw () {
                const userOptions = {
                  args: ['The chart was just redrawn', 100, 120],
                  attr: {
                        fill: Highcharts.getOptions().colors[0],
                        padding: 10,
                        r: 5,
                        zIndex: 8
                    },
                    css: {
                        color: '#FFFFFF'
                    }
                }

               const label = createLabel(this.renderer, userOptions)

               customLabels.push(label)
            }
        }
    },
    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, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],

    exporting: {
      chartOptions: {
        chart: {
          events: {
            load () { // recreate the labels
              this.labelsForExport = customLabels.map(({ userOptions }) => createLabel(this.renderer, userOptions))
            },

            destroy () { // clean up the labels
              this.labelsForExport.forEach(label => label.destroy())
            }
          }
        }
      }
    }
});

живой пример