Highstockでは、このデモのように日付フィールドにテキストを入力する代わりに、jquery uidatepickerを使用できます... http://jsfiddle.net/hcharge/aNde9/
datepicker
入力を1回クリックすると、入力フィールドの下にあるはずの日付ピッカーが開きますが、閉じてからもう一度開くと、コンテナーの上部に固定されます。Webページに実装すると、これはブラウザウィンドウの上部になります。
これは既知の問題ですか?
Highstockでは、このデモのように日付フィールドにテキストを入力する代わりに、jquery uidatepickerを使用できます... http://jsfiddle.net/hcharge/aNde9/
datepicker
入力を1回クリックすると、入力フィールドの下にあるはずの日付ピッカーが開きますが、閉じてからもう一度開くと、コンテナーの上部に固定されます。Webページに実装すると、これはブラウザウィンドウの上部になります。
これは既知の問題ですか?
datepicker は、ウィジェットのスタイルの「top」属性を介して垂直位置を制御します。何らかの理由で、以降の datepicker アクティベーションでは「top」が常に 0 に設定されます。
ただし、ウィジェットのデータに正しい位置を「記憶」させ、後続の呼び出しでその位置を明示的に設定する場合、回避策は比較的簡単です。以下の datePicker オプション内で定義されている「onClose」および「beforeShow」関数を参照してください。
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1,
inputDateFormat: '%Y-%m-%d',
inputEditDateFormat: '%Y-%m-%d'
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
}, function(chart){
// apply the date pickers
setTimeout(function(){
$('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
.datepicker({
beforeShow: function(i,obj) {
$widget = obj.dpDiv;
window.$uiDatepickerDiv = $widget;
if ($widget.data("top")) {
setTimeout(function() {
$uiDatepickerDiv.css( "top", $uiDatepickerDiv.data("top") );
},50);
}
}
,onClose: function(i,obj) {
$widget = obj.dpDiv;
$widget.data("top", $widget.position().top);
}
})
},0)
});
});
同じ入力形式を設定する必要があるため、datepicker を HighstockdateFormat
と同じに変更するか、Highstock を変更する必要がありinputRangeFormat
ます。