Highcharts添加按钮修复图

Question

美好的一天！如何添加按钮以将其链接到图形？我的意思是，当我添加一个按钮时。当我拉伸图形时，该按钮在应移动时仍保持在相同的坐标处。

我这样添加它：

chart.renderer.button('Reset', 500, 200, function() {
  console.log(chart);
}, null, null, null).attr({
      zIndex: 4
    }).add();

Answer 1

以下是有关如何使用渲染功能创建响应式按钮的指南。

演示：https://jsfiddle.net/BlackLabel/tj50heo1/

  chart: {
    events: {
      render() {
        let chart = this,
          x = chart.plotWidth / 2 + chart.plotLeft,
          y = chart.plotHeight;

        if (chart.customBtn) {
          chart.customBtn.destroy();
        }

        chart.customBtn = chart.renderer.button('Reset', x, y, function() {}, null, null, null).attr({
          zIndex: 4,
        }).add();

        //center button after render with width value
        chart.customBtn.translate(chart.customBtn.x - chart.customBtn.width /2, chart.customBtn.y)
      }
    }
  },

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

API：https://api.highcharts.com/highcharts/chart.events.render