Highchart：将自定义按钮添加到 show/hide 注释？

Question

我正在使用 highchart 来显示折线图。我添加了一些注释。

annotations: [{
                            labels: [
        
        {
            point: {
                x: 1,
                y: 13.120689655172,
                xAxis: 0,
                yAxis: 0
            },
            text: '(+) New Line First'
        },
        
        {
            point: {
                x: 8,
                y: 16.1,
                xAxis: 0,
                yAxis: 0
            },
            text: '(+) Sold Some Books'
        },],

我想为 show/hide 这些注释创建一个按钮。有人可以帮我吗？我不知道如何创建一个按钮并显示隐藏它们。

谢谢

Answer 1

我准备了一个带有 hides/shows 注释的自定义按钮的演示。

演示：https://jsfiddle.net/BlackLabel/75gmt0v3/

let btn = document.getElementById('btn');

btn.addEventListener('click', function() {
    
  if (chart.annotationVisible) {
    chart.annotations[0].graphic.hide();
    chart.annotationVisible = false;
  } else {
    chart.annotations[0].graphic.show();
    chart.annotationVisible = true;
  }
})

如果您想将此按钮呈现为图表的一部分，请使用 SVGRenderer 工具 - https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

Highchart：将自定义按钮添加到 show/hide 注释？

Highchart: add custom button to show/hide annotations?

annotations

highcharts