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

我在React中使用Highcharts 6.0.7，特别是在创建图表后，而不是在构造函数回调中，使用chart.renderer对象将SVG元素添加到图表中。问题是，当我尝试导出图表时，联机和脱机模块都没有导出自定义SVG

我需要这个问题的解决方案，因为我的客户希望在图表中绘制注释和线条

我附加了一个jsfiddle

---

您需要保留“用户留下的”选项，并使用这些保留的选项在“导出图表加载”事件上重新创建形状/标签。根据用户在图表中可以做什么，保留选项可能会很复杂，但对于简单的形状/标签，它归结为保存属性和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())
            }
          }
        }
      }
    }
});

---

非常感谢您可能的副本！

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