如何更改高图表高库存中输入的位置？

Question

这是我的图表在图表中的默认样式： 我想更改输入的位置，我使用的图表来自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;