使用高级图表切换自定义按钮文本

Question

有没有办法在高图中切换自定义按钮的文本？

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)。