IgbDataChart – ボタンクリックでズームイン/ズームアウトしたい

IgbDataChart で、画面上のボタンをクリックしたときにチャートをズームイン/ズームアウトさせる方法を紹介します。IgbDataChart の ZoomInAsync メソッドと ZoomOutAsync メソッドを、ボタンのクリックイベントから呼び出すことで実現できます。

IgbDataChart の設定

コードからメソッドを呼び出せるように、IgbDataChart に @ref を指定してインスタンスを参照できるようにします。

<IgbDataChart @ref="chart" ...>
    <IgbCategoryXAxis Name="xAxis" ... />
    <IgbNumericYAxis Name="yAxis" ... />
    <IgbColumnSeries XAxisName="xAxis" YAxisName="yAxis" ... />
</IgbDataChart>

ZoomInAsync / ZoomOutAsync の使用

ズームイン用とズームアウト用のボタンを用意し、それぞれの @onclick にハンドラを指定します。

<IgbButton @onclick="OnZoomIn">Zoom In</IgbButton>
<IgbButton @onclick="OnZoomOut">Zoom Out</IgbButton>

ハンドラでは、@ref で取得した IgbDataChart のインスタンスに対して ZoomInAsync / ZoomOutAsync を呼び出します。

両メソッドの引数(double)には、現在の表示範囲(ウィンドウ矩形)に対するズームの割合を指定します。値が大きいほど 1 回のクリックで拡大/縮小される量が大きくなります。ここでは 0.1 を指定しているため、ボタンを 1 回クリックするごとに少しずつズームイン/ズームアウトします。

@code {
    private IgbDataChart? chart;

    private async Task OnZoomIn()
    {
        if (chart != null) await chart.ZoomInAsync(0.1);
    }

    private async Task OnZoomOut()
    {
        if (chart != null) await chart.ZoomOutAsync(0.1);
    }
}

実行結果

「Zoom In」ボタンをクリックするとチャートがズームインし、「Zoom Out」ボタンをクリックするとズームアウトします。