ASP.NET MVC コントロールヘルプ
ズームとパン

FlexChartでは、ズームとパンという2種類のチャート操作を行うことができます。ズーム機能とパン機能は、データ量が大きい場合に特に重要です。ズームを使用すると、選択したチャート領域を拡大または縮小して表示できます。また、パンを使用すると、チャート領域内をナビゲートできます。

次のコード例は、FlexChartにズームおよびパン機能を追加する方法を示します。この例では、「クイックスタート」セクションで作成したサンプルを使用します。ズームアクションを実行するには、チャート領域を選択してズームインするか、マウスホイールでスクロールしてズーム領域をズームイン/アウトします。パンを実行するには、チャート領域内でクリックしてドラッグします。

Razor
コードのコピー
@using C1MvcWebAppZoomPan.Models;
@using C1.Web.Mvc.Chart;
@model IEnumerable<FruitSale>

<script>
    var mouseActionControl, axesControl, scalingChart, chartZoom;
    c1.documentReady(function () {
        mouseActionControl = "Zoom";
        axesControl = "X";
        scalingChart = wijmo.Control.getControl("#scalingChart");
        scalingChart.plotMargin = 'NaN NaN NaN 80';

        chartZoom = new wijmo.chart.interaction.ChartGestures(scalingChart);
        chartZoom.mouseAction = wijmo.chart.interaction.MouseAction.Zoom;
        chartZoom.mouseActionControl = wijmo.chart.interaction.InteractiveAxes.X;

        if (navigator.userAgent.match(/iPad/i) != null || /Android/i.test(navigator.userAgent)) {
            document.querySelector('#mouseAction').style.display = 'none';
        }

        chartZoom.rangeChanged.addHandler(function () {
            document.querySelector('#reset').disabled = undefined;
        });

        window.setTimeout(function () {
            scalingChart.axisX.min = new Date(2014, 4, 1);
            scalingChart.axisY.min = 24;
        }, 200);
    });
   
    function setMouseAction(sender) {
        mouseActionControl.header = "Mouse Action: <b>" + sender.selectedItem.Header + "</b>";
        chartZoom.mouseAction = wijmo.chart.interaction.MouseAction[sender.selectedItem.Header];
    }

    function setInteractiveAxes(sender) {
        axesControl.header = "Interactive Axes: <b>" + sender.selectedItem.Header + "</b>";
        chartZoom.interactiveAxes = wijmo.chart.interaction.InteractiveAxes[sender.selectedItem.Header];
    }

    function resetAxes() {
        if (chartZoom) {
            chartZoom.reset();
            if (scalingChart) {
                scalingChart.axisX.min = new Date(2014, 4, 1);
                scalingChart.axisY.min = 24;
            }
        }
        document.querySelector('#reset').disabled = 'disabled';
    }
</script>

@(Html.C1().FlexChart()
.Bind("Date", Model)
.Id("scalingChart")
.ChartType(C1.Web.Mvc.Chart.ChartType.Area)
.Series(sers =>
  {
      sers.Add()
     .Binding("SalesInUSA")
     .Name("Sales in USA");
  })
)