如何在点击事件上更改自定义股票工具按钮的图标？答案

【问题标题】：How can I change icon of the custom stock-tool button on click event?如何在点击事件上更改自定义股票工具按钮的图标？
【发布时间】：2020-11-13 02:13:55
【问题描述】：

我有这个jsfiddle，其中我添加了两个自定义stock-tools 注释，其中添加了circle 和rectangle 图标以及toggleAnnotations 的预定义高图按钮。

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");
      }
    }
  }
},

【问题讨论】：

标签： javascript highcharts

【解决方案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/

【讨论】：