重置變焦按鈕上的圖表標題點擊高程圖

Question

我有以下代碼的圖表顯示，我試圖捕捉被點擊的變焦按鈕的文本（這個特定的圖表有4個不同的縮放按鈕設置）來改變圖表標題。儘管智能感知提供了當前嘗試設置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); 
       },      
      } 
     }, 

這裏是一個工作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 
    }) 
}