Как я могу изменить положение входов в старших чартах?

Question

Это стиль моего графика по умолчанию в старших графиках: я хочу изменить положение входов, я использую диаграммы с https://www.highcharts.com/ сайта,
я хочу изменить с входа от слева направо и для ввода от справа налево с текстами от и до

Я хочу бытькак это изображение:

Как я могу это сделать?

Answer 1

Невозможно изменить обычные параметры API Highcharts, но внесение некоторых изменений в основной код делает свою работу.

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');

}

In 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;