Блог

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

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

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

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

Демонстрация jsFiddle

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