FlexChart

FlexChart

ズームとパン

サンプル

設定

説明

  • マウス操作:
    1. ズームモード:ズームインするチャート領域を選択するか、またはマウスホイールでスクロールしてズームイン/アウトします。
    2. パンモード:チャート領域内でクリックしてドラッグし、表示範囲を変更します。
  • タッチアクション:
    1. チャート領域をパンして、表示範囲を変更します。ピンチしてズームイン/アウトを行います。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using C1.Web.Mvc.Chart;

namespace MvcExplorer.Controllers
{
    public partial class FlexChartController : Controller
    {
        public ActionResult PanningAndScaling()
        {
            return View(JsonDataReader.GetFromFile<FinanceData>("fb2.json"));
        }
    }
}
@model List<FinanceData>

@{
    ViewBag.DemoSettings = true;
}

@(Html.C1().FlexChart().Id("gesturesChart").CssClass("stchart").ChartType(C1.Web.Mvc.Chart.ChartType.Area)
.PlotMargin("NaN NaN NaN 80")
.BindingX("X").Bind(Model)
.Legend(C1.Web.Mvc.Chart.Position.None)
.AxisX(axis =>
    {
        axis.AxisLine(false);
    })
.Series(sers =>
{
    sers.Add().Binding("Close").Name("Y Value");
})
.SupportGestures(cgb => 
    cgb.Id("gestures")
    .MouseAction(MouseAction.Zoom)
    .InteractiveAxes(InteractiveAxes.X)
    .ScaleY(0.5f)
    .PosY(0.1f)
    .ScaleX(0.5f)
    .PosX(0.1f))
)

@section Scripts{
<script>
    var chart, chartGestures;

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

        if (gesturesChart) {
            gesturesChart.axisX.rangeChanged.addHandler(function () {
                document.querySelector('#reset').disabled = undefined;
            });
            gesturesChart.axisY.rangeChanged.addHandler(function () {
                document.querySelector('#reset').disabled = undefined;
            });
        }
    });

    function getChart() {
        if (!chart) {
            chart = wijmo.Control.getControl('#gesturesChart');
        }
        return chart;
    }

    function getChartGesture() {
        var gesturesChart;
        if (!chartGestures) {
            gesturesChart = getChart();
            chartGestures = c1.getExtender(gesturesChart, 'gestures');
        }
        return chartGestures;
    }

    function updateMenu(menu, headerNamePrefix) {
        menu.header = headerNamePrefix + ': <b>' + menu.selectedItem.Header + '</b>';
    }

    function mouseActionChanged(menu) {
        var extGesture = getChartGesture();
        updateMenu(menu, 'Mouse Action');
        if (extGesture) {
            extGesture.mouseAction = wijmo.chart.interaction.MouseAction[menu.selectedItem.Header];
        }
    }

    function interactiveAxesChanged(menu) {
        var extGesture = getChartGesture();
        updateMenu(menu, 'Interactive Axes');
        if (extGesture) {
            extGesture.interactiveAxes = wijmo.chart.interaction.InteractiveAxes[menu.selectedItem.Header];
        }
    }

    function resetAxes() {
        var extGesture = getChartGesture();
        if (extGesture) {
            extGesture.reset();
        }

        document.querySelector('#reset').disabled = 'disabled';
    }
</script>
}

@section Settings{
    @(Html.C1().Menu().Id("mouseAction").Header("Mouse Action: <b>Zoom</b>")
    .OnClientItemClicked("mouseActionChanged").MenuItems(items =>
    {
        items.Add("Zoom");
        items.Add("Pan");
    }))

    @(Html.C1().Menu().Header("Interactive Axes: <b>X</b>")
    .OnClientItemClicked("interactiveAxesChanged").MenuItems(items =>
    {
        items.Add("X");
        items.Add("Y");
        items.Add("XY");
    }))

    <button id="reset" class="btn btn-primary" onclick="resetAxes()" disabled="disabled">ズームのリセット</button>
}

@section Description{
    <div class="panel panel-default">
        <div class="panel-heading">
            <ul>
                <li>
                    <b>マウス操作:</b>
                    <ol>
                        <li> ズームモード:ズームインするチャート領域を選択するか、またはマウスホイールでスクロールしてズームイン/アウトします。</li>
                        <li> パンモード:チャート領域内でクリックしてドラッグし、表示範囲を変更します。</li>
                    </ol>
                </li>
                <li>
                    <b>タッチアクション:</b>
                    <ol>
                        <li>
                            チャート領域をパンして、表示範囲を変更します。ピンチしてズームイン/アウトを行います。
                        </li>
                    </ol>

                </li>
            </ul>
        </div>
    </div>
}