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