Как удалить аннотацию из Highcharts? - PullRequest
Новая
       35

Как удалить аннотацию из Highcharts?

0 голосов
/ 15 мая 2018

Я использую Highcharts 6. Я использую следующее событие, чтобы получить свой идентификатор точки данных и открыть поповер с простой формой. 

plotOptions: {
    series: {
        point: {
            events: {
                click: function(e) {
                    selected_point = e.point.id
                    $('#chart').popover("toggle")
                }
            }
        }
    }
}

Когда форма отправляется, для этой точки данных устанавливается аннотация. 

$('body').on('click', '#save_annotation', function() {
    var text = $("#annotationForm").val()
    myChart.addAnnotation({
        labels: [{
            point: selected_point,
            text: text
        }]
    })
    $('#chart').popover("toggle")
})

Пока это работает отлично. Мне нужен способ изменить и удалить существующую аннотацию. Кажется, что я должен использовать removeAnnotation () , но я не могу понять, как его использовать. В документации указано, что мне нужно передать идентификатор аннотации. Где я могу найти этот идентификатор? Когда я вызываю myChart.annotations, я вижу массив объектов. Каждый объект является аннотацией, но у него нет свойства id.

Мне удалось использовать цикл forEach для удаления конкретной аннотации с помощью метода destroy () , но он оставляет элемент в массиве аннотаций и не рекомендуется.

Как правильно удалить аннотацию? Как я могу получить идентификатор для аннотации? Это сообщение указывает, что addAnnotation () возвращает аннотацию, которую он делает, но возвращенный объект не имеет, как показано. Например, в моем случае annotation.id возвращает неопределенное значение.

1 Ответ

0 голосов
/ 15 мая 2018

Как и в случае с точками, вы должны установить идентификатор аннотации. Затем вы можете ссылаться на него в функции removeAnnotation. 

$('body').on('click', '#container', function() {
    var text = 'Hi there';
    if (toggle) {
       myChart.addAnnotation({
          id: 'one',
          labels: [{
              point: 'one',
              text: text
          }]
      });   
    } else {
        myChart.removeAnnotation('one');
    }
    toggle = !toggle;
})

http://jsfiddle.net/0pde1tfq/

...