チャート：ズーム

FlexChartでは、柔軟なAPIを使用してズームを簡単に実装できます。最も簡単なソリューションは、ボタンまたはマウスホイールのスクロールでズームすることです。どちらの方法も、チャートの軸のmin/maxプロパティを変更することで機能します。

以下の例には、applyZoomとapplyZoomAxisの2つのメソッドが含まれています。applyZoomメソッドは、単純に各軸に対してもう1つのメソッドを呼び出します。1つの軸方向にのみズームする場合は、applyZoomAxisを使用すれば済みます。これらのメソッドでは、ズーム倍率とズームの中心が必要です。ズーム倍率は、ズームインでは<1、ズームアウトでは>1です。

// チャートにズーム倍率を適用します（ズームの中心を固定）
function applyZoom(chart, factor, center) {
    applyZoomAxis(chart.axisX, factor, center ? center.x : null);
    applyZoomAxis(chart.axisY, factor, center ? center.y : null);
}
function applyZoomAxis(axis, factor, center) {
    if (!factor) { // リセットします
        axis.min = axis.max = null;
    } else {
        var min = (axis.min != null ? axis.min : axis.actualMin).valueOf();
        var max = (axis.max != null ? axis.max : axis.actualMax).valueOf();
        if (center == null) {
            center = (min + max) /2;
        }
        axis.min = center - (center - min) * factor;
        axis.max = center + (max - center) * factor;
    }
}

マウスホイールを使用したズーム

次に、上のメソッドを使用して、マウスホイールによるズームを実装します。この例のホイールズームは、チャートの中心ではなくマウスポインタを中心に実行されます。ズーム倍率は、マウスのdeltaYが0より大きいか小さいかによって決定します。

// マウスホイールでズーム
myChart.hostElement.addEventListener('wheel', function(e) {
    if (e.ctrlKey) {
        var center = theChart.pointToData(e.clientX, e.clientY);
        applyZoom(theChart, e.deltaY > 0 ? 1.1: .9, center);
        e.preventDefault();
    }
});

ボタンによるズーム

チャートの軸の最小/最大プロパティを変更することによって動作する「ズームイン」ボタンと「ズームアウト」ボタンを追加できます。これらのボタンでは、チャートの中心がズームの中心になります。この例では、ズーム倍率に「null」を渡してズームをリセットする方法も示します。

// ズームロジック
document.getElementById('btnZoomIn').addEventListener('click', function () {
    applyZoom(theChart, .9)
});
document.getElementById('btnZoomOut').addEventListener('click', function () {
    applyZoom(theChart, 1.1)
});
document.getElementById('btnResetZoom').addEventListener('click', function () {
    applyZoom(theChart, null);
});

ボックスのドラッグによるズーム

マウスでボックスをドラッグしてズームする方法もよく使用されます。これもFlexChartを使用して実装できます。デモをご覧ください。