Highcharts 添加 3 个按钮 Hide/Remove/Settings 到 Legend

Question

我想在图例中添加 3 个按钮（Hide/Remove/Settings）：

隐藏按钮应该有 onclick 事件来隐藏 series/indicator,
删除按钮应该有 onclick 事件来删除（而不是隐藏）series/indicator,
设置按钮应该有 onclick 事件来显示 series/indicator 编辑设置的弹出窗口。

代码：

legend: {
  enabled: true,
  useHTML:true,
  labelFormatter: function () {
    return this.name + ' <button onclick="indicator_hide()">Hide</button>' + '<button onclick="indicator_remove()">Remove</button>' + '<button onclick="indicator_settings()">Settings</button>';
}

按钮代码

function indicator_hide(){
  if(chart.series[0].visible==true){ 
    chart.series[0].visible=false
  } else{
    chart.series[0].visible=true
  }
}

我创建了一个图表，请参阅下面的 link。

jsFiddle https://jsfiddle.net/PaulJaker/7bLdjs4y/1/

Answer 1

如果使用 load 图表事件添加事件侦听器，则更容易将点击事件与系列联系起来。然后一个系列调用正确的方法就够了。

chart: {
  events: {
    load: function() {
      this.legend.allItems.forEach(item => {
        const btns = item.legendItem.element.children;

        btns[0].addEventListener('click', () => indicator_hide(item));
        btns[1].addEventListener('click', () => indicator_remove(item));
        btns[2].addEventListener('click', () => indicator_settings(item));
      });

      document.getElementById('popupClose').addEventListener('click', function() {
        this.parentElement.style.visibility = "hidden";
      });
    }
  }
},
legend: {
  enabled: true,
  useHTML: true,
  labelFormatter: function() {
    return this.name + ' <button>Toggle</button>' +
      '<button>Remove</button>' +
      '<button>Settings</button>';
  }
}

现场演示： https://jsfiddle.net/BlackLabel/bu53n1sc/

API参考：https://api.highcharts.com/highcharts/chart.events.load

Highcharts 添加 3 个按钮 Hide/Remove/Settings 到 Legend

Highcharts add 3 buttons Hide/Remove/Settings to Legend

javascript

jquery

highcharts