Highcharts.stockChartレンジセレクタ（ズーム）チャートコンテナの後のボタン位置

Question

チャート表示領域の後ろに範囲セレクタボタンを配置したいとします。どのように私はそれを実装する方法を提案します。

Current Output

Expected Output

コードは、それを行うには、少なくとも一つの方法は、いくつかのマージンとX/Y-位置を両立することである

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

を使用します。問題は、ナビゲータとレンジセレクタの両方の位置決めが非常に動的な位置決めオプションを提供しないことです。

（this demoに基づいてJSFiddle demonstration）この例を参照してください：あなたのポストのための非常に有用

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 
}