Highstocks将范围选择器更改为下拉列表

Question

我需要使用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/