スクロール

ガントチャートはタイムスケールだけでなく、ビューポート領域もピクセル単位、目盛りの単位、指定単位、または指定日付単位でスクロールできます。

timescaleクラスのscrollメソッドを使用して、水平方向や垂直方向のスクロールを有効にすることができます。また、以下のようにプロパティを設定することで、スクロール動作をカスタマイズできます。

ピクセル単位でスクロール

タイムスケールをピクセル単位でスクロールするには、scroll(pixels)メソッドを使用できます。タイムスケールは最も近い目盛りまでスクロールします。正のピクセルは前方にスクロールし、負のピクセルは後方にスクロールします。

次のサンプルコードは、タイムスケールにピクセル単位でのスクロールを有効にする方法を示します。

// タイムスケールをピクセル単位でスクロールします。
// 前方にスクロールします。
var pixels = 50;
ganttSheet.project.timescale.scroll(pixels);
// 後方にスクロールします。
var pixels = -50;
ganttSheet.project.timescale.scroll(pixels);

目盛りの単位でスクロール

タイムスケールを目盛りの単位でスクロールするには、scrollOneTick()メソッドを使用できます。値を「true」に設定するとタイムスケールが前方にスクロールし、「false」に設定すると後方にスクロールします。

次のサンプルコードは、タイムスケールに目盛りの単位でのスクロールを有効にする方法を示します。

// タイムスケールを目盛りの単位でスクロールします。
// 前方にスクロールします。
ganttSheet.project.timescale.scrollOneTick(true);
// 後方にスクロールします。
ganttSheet.project.timescale.scrollOneTick();

指定単位でスクロール

タイムスケールを指定単位でスクロールするには、scrollBy(count, unit)メソッドを使用できます。スクロール単位はGC.Spread.Sheets.GanttSheet.TimescaleUnit型のパラメータで、years、halfYears、quarters、months、thirdsOfMonth、weeks、 days、hours、minutesを指定できます。

タイムスケールは最も近い目盛りまでスクロールします。指定単位に正の値を設定する場合は前方にスクロールし、負の値を設定するは後方にスクロールします。

次のサンプルコードは、タイムスケールで指定した単位のスクロールを有効にする方法を示します。

// タイムスケールをカスタム時間単位でスクロールします。
var unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.days;
var count = 3;
ganttSheet.project.timescale.scrollBy(count, unit);
// 5月間後方にスクロールします。
var unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.months;
var count = -5;
ganttSheet.project.timescale.scrollBy(count, unit);

指定日付でスクロール

タイムスケールを指定した日付でスクロールするには、scrollTo(date)メソッドを使用できます。タイムスケールは最も近い目盛りまでスクロールします。

次のサンプルコードは、タイムスケールを指定した日付にスクロールする方法を示します。

// タイムスケールをしてされた日付にスクロールします。
var date = new Date("2023/8/20");
ganttSheet.project.timescale.scrollTo(date);

対象日付をスクロールするための必要なビューポートの位置をパーセンテージで制御できます。デフォルトは 0 で、ビューポートの左にある対象日付にスクロールします。

次のサンプルコードは、対象日付をビューポートの中央までスクロールする方法を示します。

// 対象日付をビューポートの中央までスクロールします。
var date = new Date("2023/8/20");
var percentOfViewport = 0.1;
ganttSheet.project.timescale.scrollTo(date, percentOfViewport);

次の図は、各種タイムスケールのスクロール動作を示します。