javascript - Highcharts 不会导出创建后添加的自定义 SVG 元素

Question

我正在 React 中使用 Highcharts 6.0.7，具体来说，我在创建图表之后，而不是在构造函数回调中，使用 Chart.renderer 对象将 SVG 元素添加到图表中。问题是当我尝试导出图表时，在线和离线模块都不会导出自定义 SVG。

我需要解决这个问题，因为我的客户想要在图表内绘制注释和线条。

我附上一个jsfiddle example of this 。

// 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())
            }
          }
        }
      }
    }
});

<强> live example