Highstocks меняет селектор диапазона на выпадающий

Question

Мне нужно спроектировать мои Highstocks, как показано ниже, с раскрывающимся списком Rangeselctor:

Я следовал коду jsfiddle , но он не совсем соответствует моим потребностям. Также, когда пользователь выбирает диапазон, скажем «1M», он должен отображаться как выбранный. В настоящее время график подстраивается под выбранный диапазон, но раскрывающийся список не показывает текущий выбранный диапазон.

exporting: {
  buttons: {
    contextButton: {
      enabled: false
    },
    toggle: {
      text: 'Select range',
      align: 'left',
      height: 20,
      y: -3,
      theme: {
        'stroke-width': 0.5,
        stroke: '#000000',
        r: 2
      },
      menuItems: [{
        text: '1M',
        onclick: function() {
          this.rangeSelector.clickButton(0, true);
        }
      }, {
        text: '3M',
        onclick: function() {
          this.rangeSelector.clickButton(1, true);
        }          
      }]
    }
  }
},

Answer 1

Обертку можно использовать для достижения желаемой функциональности, например:

(function(H) {
  H.wrap(H.Chart.prototype, 'contextMenu', function(proceed) {
    if(this.rangeSelector.selected >= 0) {
      $('.highcharts-button text tspan').text(this.rangeSelector.buttonOptions[this.rangeSelector.selected].text.toUpperCase())
    }
    proceed.apply(this, Array.prototype.slice.call(arguments, 1)); 
  });
}(Highcharts));

Устанавливает текст кнопки при нажатии

$('.highcharts-button text tspan').text(

Чтобы отразить то, что в данный момент выбрано

this.rangeSelector.buttonOptions[this.rangeSelector.selected].text

Этот текст будет оставаться там до следующего выбора, поэтому мы должны добавить функцию для его сброса после выбора:

function resetSelector() {
  $('.highcharts-button text tspan').text('Select range')
}

Который затем выполняется при выборе:

menuItems: [{
  text: '1M',
  onclick: function() {
    this.rangeSelector.clickButton(0, true);
    resetSelector();
  }
}, {
  text: '3M',
  onclick: function() {
    this.rangeSelector.clickButton(1, true);
    resetSelector();
  }
}, 

function resetSelector() {
	$('.highcharts-button text tspan').text('Select range')
}

(function(H) {
  H.wrap(H.Chart.prototype, 'contextMenu', function(proceed) {
    if(this.rangeSelector.selected >= 0) {
    	$('.highcharts-button text tspan').text(this.rangeSelector.buttonOptions[this.rangeSelector.selected].text.toUpperCase())
    } else {
      $('.highcharts-button text tspan').text('ALL')
    }
 		
    proceed.apply(this, Array.prototype.slice.call(arguments, 1)); 

  });
}(Highcharts));

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
  Highcharts.stockChart('container', {
    exporting: {
      buttons: {
        contextButton: {
          enabled: false
        },
        toggle: {
          text: 'Select range',
          align: 'left',
          height: 20,
          y: -3,
          theme: {
            'stroke-width': 0.5,
            stroke: '#000000',
            r: 2
          },
          menuItems: [{
            text: '1M',
            onclick: function() {
              this.rangeSelector.clickButton(0, true);
              resetSelector();
            }
          }, {
            text: '3M',
            onclick: function() {
              this.rangeSelector.clickButton(1, true);
              resetSelector();
            }
          }, {
            text: '6M',
            onclick: function() {
              this.rangeSelector.clickButton(2, true);
              resetSelector();
            }
          }, {
            text: 'YTD',
            onclick: function() {
              this.rangeSelector.clickButton(3, true);
              resetSelector();
            }
          }, {
            text: '1Y',
            onclick: function() {
              this.rangeSelector.clickButton(4, true);
              resetSelector();
            }
          }, {
            text: 'All',
            onclick: function() {
              this.rangeSelector.clickButton(5, true);
              resetSelector();
            }
          }]
        }
      }
    },
    series: [{
      data: data
    }]
  });
});

.highcharts-range-selector-buttons {
  visibility: hidden;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

Рабочий пример: http://jsfiddle.net/ewolden/973ve1sx/1/

Если вы просто хотите всегда показывать то, что выбрано, вам нужно только сделать это:

Функция для установки текста:

function setSelector(text) {
  $('.highcharts-button text tspan').text(text)
}

Опции меню:

menuItems: [{
  text: '1M',
  onclick: function() {
    this.rangeSelector.clickButton(0, true);
    setSelector('1M');
  }
}, {
  text: '3M',
  onclick: function() {
    this.rangeSelector.clickButton(1, true);
    setSelector('3M');
  }
}

Рабочий пример: http://jsfiddle.net/ewolden/973ve1sx/9/