重置缩放按钮上的图表标题点击高图表

Question

我从下面的代码中得到了一个图表显示，我正在尝试捕获单击的缩放按钮的文本（这个特定的图表有4个不同的缩放按钮设置）以更改图表标题。下面显示的我的最新努力也失败了，尽管intellisense提供了当前尝试设置buttonText中显示的每个选项。

var buttonText = 60;
$('#chartContainer').highcharts('StockChart', {
            events: {
                click: function (event) {
                    buttonText = event.target.rangeSelector.buttons.selected.text;
                }
            },
            rangeSelector: {
                buttons: [{
                    type: 'day',
                    count: 15,
                    text: '15D'
                }, {
                    type: 'day',
                    count: 30,
                    text: '30D'
                }, {
                    type: 'day',
                    count: 45,
                    text: '45D'
                }, {
                    type: 'all',
                    count: 1,
                    text: 'All'
                }],
                selected: 3,
                inputEnabled: false
            },
            title: {
                text: symbol + ' -- Last '+ buttonText +' Days'
            },
            yAxis: [{
                title: {
                    text: 'Price'
                },
                height: 200,
                lineWidth: 2
            }, {
                title: {
                    text: 'Volume'
                },
                top: 300,
                height: 100,
                offset: 0,
                lineWidth: 2
            }],
            series: [{
                type: 'candlestick',
                name: symbol,
                data: ohlc,
            }]
        });

Answer 1

您的方法行不通。只有当单击图表的"背景"并且按钮不在背景中时，才会触发单击事件。

相反，我会挂接redraw事件，然后更新setTimeout上的文本（因为重绘事件在绘制之前触发）。

       chart:{
            events: {
                redraw: function(event){
                    setTimeout(function(){
                       var chart = Highcharts.charts[0];
                       var rS = chart.rangeSelector;
                       if (rS.selected != null){
                           var txt = rS.buttonOptions[rS.selected].text;
                           chart.setTitle({text: txt});
                       }
                    }, 200);
                },                    
            }
        },

这是一把正在工作的小提琴。

Answer 2

还有一种简单的方法，可以覆盖RangeSelector.setSelected（）方法

Highcharts.RangeSelector.prototype.setSelected = function(selected) {
    this.selected = this.options.selected = selected;
    // get current Selected button's text
    var text = this.buttonOptions[selected].text;
    // then you can update chart's title
    chart.setTitle({
        text: text
    })
}