使用 highcharts 切换自定义按钮文本

Question

有什么方法可以切换 highcharts 中的自定义按钮文本吗？

toggleButton: {
                text: 'ON',
                onclick: function () {
                    console.log($(this).text());
                    $(this).text(function (i, text) {
                        return text === "ON" ? "OFF" : "ON";
                    });
                }
            }

Demo Link

Answer 1

回调中的

this 指的是图表本身。按钮存储在 chart.exportSVGElements 数组中。所以，这里是解决方案：http://jsfiddle.net/knmb38dy/1/

                toggleButton: {
                    text: 'ON',
                    onclick: function () {
                        var button = this.exportSVGElements[0], // 0 = text element, 1 = rect button
                            $button = $(button.element); // in "element" stored is reference to the DOM object
                            text = $button.text() == "ON" ? "OFF" : "ON";

                        button.attr({
                            text: text
                        });
                    }
                }

注意使用 Highcharts 内置方法 attr() 来更新文本，而不是 jQuery 的 text()。

编辑：

对于 Highcharts 4.2.3+ 使用以下解决方案：http://jsfiddle.net/knmb38dy/33/

唯一的区别是如何在 jQuery 中获取按钮：$button = $(button.element.lastChild)。

使用 highcharts 切换自定义按钮文本

Toggle the custom button text using highcharts

highcharts