时间戳

首页 > 解决方案 > 如何在高位图表中更改输入位置？

javascript - 如何在高位图表中更改输入位置？

问题描述

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

我想成为这样的形象： 2

我怎样才能做到这一点？

标签： javascriptcssinputchartshighcharts

解决方案

常规的 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;

推荐阅读