如何在Highstock的自定义坐标中定位RangeSelector /缩放按钮

问题描述

我使用highstock图表并希望将缩放按钮（1m，2m等）移动到不同的位置。

我检查了他们的，目前似乎没有办法做到这一点。
也是源代码表明这个位置是硬编码的，因此我不认为我可以使用一些未公开的财产轻松地注入头寸。

Highstock Source h2>

  Highcharts.RangeSelector.prototype.render = function（min，max）{
 ... 
 rangeSelector。 zoomText = renderer.text（lang.rangeSelectorZoom，plotLeft，chart.plotTop  -  10）
 .css（options.labelStyle）
 .add（）; 
 
 //按钮起始位置
 buttonLeft = plotLeft + rangeSelector.zoomText.getBBox（）。width + 5; 
 ... 
} 
  

解决方案

这可以通过覆盖当前的渲染方法，然后在将实际渲染方法调用到所需位置后移动框来完成。

  var orgHighchartsRangeSelectorPrototypeRender = Highcharts.RangeSelector.prototype.render; 
 Highcharts.RangeSelector.prototype.render = function（min，max）{
 orgHighchartsRangeSelectorPrototypeRender.apply（this，[min，max]）; 
 var leftPosition = this.chart.plotLeft，
 topPosition = this.chart.plotTop + 5，
 space = 2; 
 this.zoomText.attr（{
 x：leftPosition，
 y：topPosition + 15 
}）; 
 leftPosition + = this.zoomText.getBBox（）。width; 
 for（var i = 0; i< this.buttons.length; i ++）{
 this.buttons [i] .attr（{
x：leftPosition，
y：topPosition 
}）; 
 leftPosition + = this.buttons [i] .width + space; 
} 
}; 
  

这个代码需要在创建任何图表之前运行

I am using highstock charts and wish to move the zoom buttons (1m,2m,etc) to a different position.

I checked their API and there doesn't seem to be an option to do that currently.Also the source code suggests that this location is hardcoded and hence i don't think I can easily inject the position using some undocumented property

Highstock Source

Highcharts.RangeSelector.prototype.render = function (min, max) {
...
rangeSelector.zoomText = renderer.text(lang.rangeSelectorZoom, plotLeft, chart.plotTop - 10)
                .css(options.labelStyle)
                .add();

// button starting position
buttonLeft = plotLeft + rangeSelector.zoomText.getBBox().width + 5;
...
}

解决方案

This can be done by overriding the current render method and then moving the boxes after calling the actual render method to a position desired

var orgHighchartsRangeSelectorPrototypeRender = Highcharts.RangeSelector.prototype.render;
Highcharts.RangeSelector.prototype.render = function (min, max) {
    orgHighchartsRangeSelectorPrototypeRender.apply(this, [min, max]);
    var leftPosition = this.chart.plotLeft,
        topPosition = this.chart.plotTop+5,
        space = 2;
    this.zoomText.attr({
        x: leftPosition,
        y: topPosition + 15
    });
    leftPosition += this.zoomText.getBBox().width;
    for (var i = 0; i < this.buttons.length; i++) {
        this.buttons[i].attr({
            x: leftPosition,
            y: topPosition
        });
        leftPosition += this.buttons[i].width + space;
    }
};

This code needs to be run before creating any chart

Positioning Zoom buttons | Highchart & Highstock @ jsFiddle

这篇关于如何在Highstock的自定义坐标中定位RangeSelector /缩放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！