如何在单击事件中更改自定义股票工具按钮的图标？

Question

我有这个jsfiddle ，我在其中添加了两个自定义股票工具注释，其中添加了circle和rectangle图标以及用于toggleAnnotations的预定义 highchart 按钮。

stockTools: {
  gui: {
    enabled: true,
    buttons: ['oneAnnotation', 'twoAnnotation', 'toggleAnnotations'],
    definitions: {
      oneAnnotation: {
        className: 'highcharts-one-annotation',
        symbol: 'circle.svg'
      },
      twoAnnotation: {
        className: 'highcharts-two-annotation',
        symbol: 'rectangle.svg'
      },
    }
  }
},

正如我们所看到的，在这个切换注释可见性的预定义按钮中，图标在按钮单击时发生变化。 所以我想在我的自定义按钮中拥有同样的东西。 我实际上需要一个自定义按钮（而不是上面示例中的两个），并且我想在用户单击它时更改其图标。 所以我想在circle.svg和rectangle.svg图标之间切换。

按钮上的点击由部件管理：

navigation: {
  bindings: {
    oneAnnotation: {
      className: 'highcharts-one-annotation',
      init: function(e) {
        alert("click on the circle annotation");
      }
    },
    twoAnnotation: {
      className: 'highcharts-two-annotation',
      init: function(e) {
        alert("click on the rectangle annotation");
      }
    }
  }
},

Answer 1

您可以切换按钮元素的backgroundImage样式，例如：

navigation: {
  bindings: {
    oneAnnotation: {
      className: 'highcharts-one-annotation',
      init: function(button) {
        var iconsURL = 'https://code.highcharts.com/8.2.2/gfx/stock-icons/';
        var url1 = 'url("' + iconsURL + 'rectangle.svg' + '")';
        var url2 = 'url("' + iconsURL + 'circle.svg' + '")';
        var btnStyle = button.children[0].style;

        btnStyle.backgroundImage = btnStyle.backgroundImage === url1 ? url2 : url1;
      }
    },
    ...
  }
}

---

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