是否可以将缩放按钮定位在highcharts/highstock中?

hch*_*rge 4 javascript charts highcharts highstock

正如标题所示,我们有一些图表在左侧有两个y轴,因此如果屏幕变小,则缩放按钮与范围输入重叠.

理想情况下,我希望缩放按钮始终对齐到图表的左侧(包括轴)

谢谢

在此输入图像描述

我无法在API中找到任何可能的建议http://api.highcharts.com/highstock#rangeSelector

Ale*_*kov 9

默认情况下,缩放重置按钮位于右侧.您可以使用此代码更改位置,例如:

...
chart: {
    zoomType: 'x, y',
    resetZoomButton: {
        position: {
            align: 'left', // right by default
            verticalAlign: 'top', 
            x: 10,
            y: 10
        },
        relativeTo: 'chart'
    }
}    
...
Run Code Online (Sandbox Code Playgroud)

现场演示.


Lor*_*nzo 3

检查此:如何将 RangeSelector / 缩放按钮定位在 Highstock 中的自定义坐标处

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;
    }
};
Run Code Online (Sandbox Code Playgroud)