확대/축소 단추의 차트 제목 재설정

Question

다음 코드의 차트 표시가 있는데이를 클릭 한 줌 단추의 텍스트를 캡처하려고합니다 (이 특정 차트에는 4 가지 다른 확대/축소 단추 설정이 있음). 차트 제목 아래에 표시된 나의 최근 노력은 또한 intelisense가 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

A는, 당신이 그것을 작동 가져올 수 없습니다 아직

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