IgbDataChart – ボタンクリックでズームをリセットしたい

IgbDataChart でズームを有効にしたあと、ボタンのクリックでズームを元の状態に戻す方法を紹介します。

IgbDataChart の設定

DefaultInteraction に InteractionState.DragZoom を設定し、IsHorizontalZoomEnabled と IsVerticalZoomEnabled を有効にすることで、チャート上のドラッグ操作でズームできるようになります。また、メソッドを呼び出すため @ref でチャートの参照を取得します。

<IgbDataChart @ref="chart"
              DefaultInteraction="InteractionState.DragZoom"
              IsHorizontalZoomEnabled
              IsVerticalZoomEnabled
              ...>
    ...
</IgbDataChart>

ResetZoomAsync メソッドの使用

ズームのリセットには、IgbDataChart の ResetZoomAsync メソッドを使用します。ボタンの @onclick からハンドラを呼び出し、その中で ResetZoomAsync を実行します。

<IgbButton @onclick="OnReset">Reset Zoom</IgbButton>

private IgbDataChart? chart;

private async Task OnReset()
{
    if (chart != null)
        await chart.ResetZoomAsync();
}

実行結果

チャート上をドラッグしてズームしたあと、「Reset Zoom」ボタンをクリックすると、ズームが解除されて元の表示範囲に戻ります。