以下のソリューションは、基本的には自転車です。 HighStockと呼ばれるHighCharts開発者からの新製品の登場により、この方法で実装する必要はなくなりました。 ただし、HighStockはまだベータ版です。
どのように見えますか
上の図では、実装に必要なものに対応する4つのゾーンが選択されています。
- 詳細チャート
- スケジュール「マスター」
- 表示期間
- ドラッグアンドドロップ期間のスクロールバー
初見
明らかに、HighChartsはチャートの表示に使用され、jQuery UI Silderはスライダーに使用されます。 HTMLマークアップは、上記のリストに従って配置された4つの連続したDIV'aにすぎません。 JSではすべてがそれほど単純ではありませんが、ここでの主な問題は、スクロールバー、スライダー、および「詳細」チャートのアクションの同期です。 スケジュールの作成と更新に問題はなく、構成をドキュメントを使用して簡単に処理できます。 主な機能のうち、「マスター」チャートでは、X軸とその署名のみを残し、残りのサービス要素を非表示にする必要があることに注意してください。
スライダー
スライダーは次のように作成されます。
function createSlider() { var sliderId = "#" + _sliderContainerId; $(sliderId).slider({ range: true, min: _minDate, max: _maxDate, values: [_minDate, _maxDate], stop: onSliderStop, slide: onSliderSlide }); $(sliderId + " > .ui-widget-header").addClass(_sliderRangeClass); $(sliderId + " > .ui-slider-handle").addClass(_sliderHandleClass); $(sliderId).show(); createScrollbar(); } function createScrollbar() { var scrollId = "#" + _scrollbarContainerId; $(scrollId).slider({ min: _minDate, max: _maxDate, slide: onScrollbarSlide, stop: onScrollbarStop }); $(scrollId + " > .ui-slider-handle").addClass(_scrollbarHandleClass); $(scrollId).show(); }
スライダーとスクロールバーの制限値は同じです。左の境界線は最小の日付に対応し、右の境界線は最大の日付に対応します。
範囲スライダー（図の3）を使用すると、表示されている期間の左右の境界線を変更できます。 境界線の変更と並行して、スクロールバーとして使用されるスライダーNo. 4のハンドルの幅も変更する必要があります。 これらの目的のために、適切なハンドラーがスライドイベントに割り当てられます。 スライダーのいずれかを使用する際に、一定の再描画によるブレーキを避けるために、スライダーの停止イベントにスケジュールの更新を割り当てる必要があります。
チャートNo. 3は範囲スライダーであるため、更新するときは左右の境界線を設定するだけでよく、jQueryの残りの部分は問題なく動作します。 スクロールバーの場合、ハンドルのサイズを手動で変更する必要があります。 このような機能はデフォルトでは提供されていません（実際、なぜですか？）。 これを行うときは、次を実行します。
scrollbar.css("margin-left", -1 * width / 2 - 1);
この方法を使用すると、コンテナごとにスクロールバーのハンドルを視覚的に半身のままにしないでください。 さらに、 このスライダーはハンドルの中央に対応する単一の値を取るため、スクロールバーの値は左端の位置にその幅の半分を加えたものに等しくなります。 また、スクロールバーを使用する場合、スクロールバーが右端または左端に到達したかどうかを監視し、この場合は停止する必要があります（ preventDefaultを使用）。
上記を考えると、私の場合、ハンドラーは次のようになりました。
function updateSlider(from, to) { _from = from; _to = to; var $slider = $("#" + _sliderContainerId); $slider.slider("values", 0, from); $slider.slider("values", 1, to); } function updateScrollbar(from, to) { var range = to - from; var $scrollbar = $("." + _scrollbarHandleClass); var width = $("." + _sliderRangeClass).width(); $scrollbar.width(width); $scrollbar.css("margin-left", -1 * width / 2 - 1); $scrollbar.attr("range", range); $("#" + _scrollbarContainerId).slider("value", from + range / 2); } function onSliderSlide(event, ui) { var from = _from = ui.values[0]; var to = _to = ui.values[1]; var fromDate = new Date(from).toUTCString(); var toDate = new Date(to).toUTCString(); updateScrollbar(from, to); } function onSliderStop(event, ui) { updateChart(ui.values[0], ui.values[1]); } function onScrollbarSlide(event, ui) { var value = ui.value; var range = $("." + _scrollbarHandleClass).attr("range") * 1; var minReached = value - _minDate < range / 2; var maxReached = _maxDate - value < range / 2; if (minReached) { updateSlider(_minDate, _minDate + range); event.preventDefault(); return; } if (maxReached) { updateSlider(_maxDate - range, _maxDate); event.preventDefault(); return; } updateSlider(value - range / 2, value + range / 2); } function onScrollbarStop(event, ui) { var value = ui.value; var range = $("." + _scrollbarHandleClass).attr("range") * 1; updateChart(value - range / 2, value + range / 2); }
結果
その結果、指示に従って、次のようなものを作成できます： デモ 。 CSSを使用すると、ほとんど何でも好きな外観にできます。 動的な読み込みと更新、データ比較など、結果のグラフに物事を追加するのは簡単です。
参照：