Динамические аннотации Highcharts версии 6 не применяются при запуске getSVG ()

Question

Динамические аннотации Highcharts версии 6 не применяются при запуске getSVG ()

1

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/

Will Thomas 22 окт. 2017, в 17:29

Источник

Теги:

javascript

highcharts

highstock

1 ответ

Ещё вопросы

Will Thomas · Answer 1 · 2017-10-22T13-26-00.000Z

После преобразования в него появляется, что модуль экспорта неправильно присваивает аннотации в 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);
                    }
                });

Выше строка 1020 в exporting.src.js - вы можете видеть, что она копирует chart.series в options.series...

Он не делает этого для аннотаций и просто использует те, которые созданы во время выполнения. Чтобы исправить это, я добавил 3 строки кода в 1035:

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

Это копирует ВСЕ аннотации (в том числе исполняемые) в options.annotations

Я могу подтвердить, что это правильно создает SVG, и все исправлено.

Чтобы продолжить обновление моего ответа

Фактически вам не нужно использовать внутреннюю функцию getSVG, но вместо этого создавайте простой HTML, используя chart.getChartHTML(), затем chart.sanitizeSVG(chartHTML), чтобы получить точную копию того, что вы видите на графике.

Например:

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