我怎样才能在highcharts highstock中改变输入的位置？

Question

这是我在highcharts中的图表的默认样式：我想改变输入的位置，我使用的图表来自https://www.highcharts.com/网站， 我想从左到右改变输入，从右到左输入来自和来自文本

我希望像这样的形象：

我怎样才能做到这一点？

Answer 1

在常规的Highcharts API选项中无法更改，但在核心代码中进行一些更改可以完成这项工作。

jsFiddle demo

在Highcharts.RangeSelector.prototype.render中我们需要切换触发rangeSelector.drawInput函数的序列：

if (inputEnabled !== false) {
  rangeSelector.div = div = createElement('div', null, {
    position: 'relative',
    height: 0,
    zIndex: inputsZIndex
  });

  container.parentNode.insertBefore(div, container);

  // Create the group to keep the inputs
  rangeSelector.inputGroup = inputGroup =
    renderer.g('input-group').add(group);
  inputGroup.offset = 0;

  rangeSelector.drawInput('max');
  rangeSelector.drawInput('min');

}

在Highcharts.RangeSelector.prototype.drawInput中，我在这里做了一些样式/创建更改：

// Create an SVG label that shows updated date ranges and and records
// click events that bring in the HTML input.
this[name + 'DateBox'] = dateBox = renderer.label('', inputGroup.offset)
  .addClass('highcharts-range-input')
  .attr({
    padding: 2,
    width: options.inputBoxWidth || 90,
    height: options.inputBoxHeight || 17,
    'text-align': 'center'
  })
  .on('click', function() {
    // If it is already focused, the onfocus event doesn't fire
    // (#3713)
    rangeSelector.showInput(name);
    rangeSelector[name + 'Input'].focus();
  });
// Create the text label
this[name + 'Label'] = label = renderer.label(
    lang[isMin ? 'rangeSelectorFrom' : 'rangeSelectorTo'],
    this.inputGroup.offset
  )
  .addClass('highcharts-range-label')
  .attr({
    padding: 2,
    paddingLeft: 100
  })
  .add(inputGroup);

inputGroup.offset += label.width - 85;