IgbDataChart – 棒チャートをマウスホイールでスクロールする

IgbDataChart ではズーム機能( IsVerticalZoomEnabled / IsHorizontalZoomEnabled )が有効に設定されるとマウスホイールの操作によってチャートのズームが行われます。ズームの代わりにチャートのスクロールを行うには、チャートのズーム機能は無効に設定し、javascript コードによってマウスホイールイベントを検知してチャートの windowPositionVertical プロパティを調整します。

IgbDataChart には id を指定しておきます。

<IgbDataChart ..... id="myChart1" IsVerticalZoomEnabled="false">
.....
</IgbDataChart>

OnAfterRenderAsyncにてjavascriptファンクション「setChart」を実行します。

@inject IJSRuntime JS

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (firstRender)
	{
		await using var module = await JS.InvokeAsync<IJSObjectReference>("import", new object[] { "./JavaScript.js" });
		await module.InvokeAsync<string>("setChart", "myChart1");
	}
}

setChart() では、id によってチャート要素にアクセスし、wheel イベントで deltaY の値によって上下のスクロールを判別し、チャートのwindowPositionVertical プロパティを調整します。

export const setChart = (chartId) => {
    const chartEle = document.querySelector("#" + chartId);
    chartEle.addEventListener('wheel', (event) => {
        event.preventDefault();
        const chart = chartEle.querySelector("igc-data-chart");
        if (event.deltaY < 0) {
            if (Number.isNaN(chart.windowPositionVertical)) {
                chart.windowPositionVertical = 0;
            }
            else {
                chart.windowPositionVertical -= 0.05;
            }
            if (chart.windowPositionVertical < 0)
                chart.windowPositionVertical = 0;
        }

        if (event.deltaY > 0) {
            if (Number.isNaN(chart.windowPositionVertical)) {
                chart.windowPositionVertical = 0;
            }
            else {
                chart.windowPositionVertical += 0.05;
            }
            if (chart.windowPositionVertical > chart.windowRect.top) {
                chart.windowPositionVertical = chart.windowRect.top;
            }
        }
    });
}