运行getSVG（）

Question

Highcharts版本6使您能够添加注释。以下JSFiddle显示每次单击图表时在鼠标位置添加注释。如果然后运行get svg（button）它会生成一个SVG，但它不包含动态添加的注释。如果运行SVG并在运行时应用了注释，则它们会正确应用..

有什么想法吗？

var chart = Highcharts.chart('container', {


 chart: {
    events: {
      click: function(e) {
        chart.addAnnotation({
          labels: [{
            point: {
              x: e.chartX,
              y: e.chartY
            },
            text: 'Some info...'
          }]
        });
      }
    }
  },
  credits: {
    enabled: false
  },

  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]
  }],

  annotations: [{
    labelOptions: {
      backgroundColor: '#000'
    }
  }],

});

// the button handler
$('#button').click(function() {
  var svg = chart.getSVG()

  document.body.innerHTML = svg;
});

https://jsfiddle.net/tzsn17cn/

Answer 1

在深入研究之后，导出模块似乎没有在SVG中正确分配注释。 getSVG（）函数创建一个“沙箱”图表，因此在创建SVG之前将该图表的所有功能复制到沙箱图表中。

                options.series = [];
                each(chart.series, function(serie) {
                    seriesOptions = merge(serie.userOptions, { // #4912
                        animation: false, // turn off animation
                        enableMouseTracking: false,
                        showCheckbox: false,
                        visible: serie.visible
                    });

                    if (!seriesOptions.isInternal) { // used for the navigator series that has its own option set
                        options.series.push(seriesOptions);
                    }
                });

上面是exports.src.js中的第1020行 - 你可以看到它将chart.series复制到options.series ......

它不会对注释执行此操作，只使用在运行时创建的注释。为了纠正这个问题，我在1035添加了3行代码：

options.annotations = [];
                each(chart.annotations, function(annon) {
                    options.annotations.push( { labelOptions: annon.options.labelOptions, labels: annon.options.labels } );
                });

这会将所有注释（包括运行时注释）复制到options.annotations

中

我可以确认这是正确创建一个SVG并且一切都已修复。

要进一步更新我的回答

您实际上不需要使用内部getSVG函数，而是使用chart.getChartHTML（）生成纯HTML，然后使用chart.sanitizeSVG（chartHTML）生成您在图表上看到的内容的精确副本。

例如：

var chartHTML = chart.getChartHTML();
var svg = chart.sanitizeSVG(chartHTML);