Question

我正在使用Highcharts 6.我使用以下事件来获取我的数据点ID并使用简单的表单打开popover。

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()，但我似乎无法弄清楚如何使用它。文档表明我需要传递注释ID。我在哪里可以找到这个ID？当我调用myChart.annotations时，我可以看到一个对象数组。每个对象都是一个注释，但没有id属性。

我能够使用forEach循环使用destroy()方法删除特定注释，但它会在注释数组中留下一个项目，不建议这样做。

删除注释的正确方法是什么？如何获取注释的ID？这篇文章指出addAnnotation（）返回它所做的注释，但返回的对象没有显示。例如，在我的情况下，annotation.id返回undefined。

Answer 1

与点非常相似，您必须设置注释的ID。然后你可以在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/

如何从Highcharts中删除注释？

1 个答案: