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

你的方法不起作用。 click事件仅在单击图表的“背景”且按钮不在后台时触发。

相反，我会挂钩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);
                },                    
            }
        },

这是一个有效的fiddle。

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

在缩放按钮上重置图表标题在高图中单击

2 个答案: