Highcharts.stockChart 图表容器后的范围选择器（缩放）按钮位置

Question

我想将范围选择器按钮放在图表显示区域之后。有人建议我如何实现它。

Current Output

Expected Output

使用代码

Highcharts.stockChart('chartcontainer', {
    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'AAPL Stock Price'
    },

    plotOptions: {
        candlestick: {
            color: '#00c800',
            upColor: '#c80000'
        }
    },

    series: [{
        type: 'candlestick',
        name: 'AAPL Stock Price',
        data: data,
        dataGrouping: {
            units: [
                [
                    'week', // unit name
                    [1] // allowed multiples
                ], [
                    'month',
                    [1, 2, 3, 4, 6]
                ]
            ]
        }
    }]
});

Answer 1

至少一种方法是兼顾多个边距和 x/y-positions。问题是导航器和范围选择器的定位都没有提供非常动态的定位选项。

查看此示例 (JSFiddle demonstration based on this demo)：

chart: {
    marginTop: 20, // Close the gap where the range selector used to be
    marginBottom: 60, // Make space for the new range selector position
},

rangeSelector: {
    selected: 1,
    buttonPosition: {
        x: 0,
        y: 370 // Move the range selector down the Y-axis
    }
},

navigator: {
    top: 300 // Reposition the navigator based on the top of the chart
}

Highcharts.stockChart 图表容器后的范围选择器（缩放）按钮位置

Highcharts.stockChart Range Selector (zoom) Button Position After the Chart Container

javascript

jquery

highcharts

highstock