機能

移動平均

移動平均

移動平均傾向線は、元のデータセットから一連の平均値を求めることでデータを分析するために使用されます。

機能

チャートタイプ
ユーザー操作機能
分析機能

設定

説明

移動平均傾向線は、元のデータセットから一連の平均値を求めることでデータを分析するために使用されます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FinancialChartExplorer.Models;

namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult MovingAverages()
        {
            var model = BoxData.GetDataFromJson();
            return View(model);
        }
    }
}
@using FinancialChartExplorer.Models

@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
}

<script type="text/javascript">
    var day = 'Day',
        settings = 'Settings';
    
    c1.documentReady(function () {
        day = '@Resources.Home.MovingAverages_Day';
        settings = '@Resources.Home.MovingAverages_Settings';
    });

    function shortPeriodChanged(number, args) {
        if (!checkValue(number)) {
            return;
        }
        updatePeriod(1, number.value);
    }

    function updatePeriod(seriesIndex, value) {
        var chart = wijmo.Control.getControl('#movingAvg'),
            series, text,
            titleEle = wijmo.getElement(seriesIndex == 1 ? '#shortTitle' : '#longTitle');

        if (chart) {
            series = chart.series[seriesIndex];
            text = value.toString() + ` ${day} MA`;
            series.name = text;
            series.period = value;
            if (titleEle) {
                titleEle.innerText = text + ` ${settings}`;
            }
        }
    }

    function updateMenu(menu, seriesIndex, headerName) {
        var chart = wijmo.Control.getControl('#movingAvg'),
            series;
        if (chart) {
            menu.header = headerName + ': <b>' + menu.selectedItem.Header + '</b>';
            series = chart.series[seriesIndex];
            series.type = wijmo.chart.analytics.MovingAverageType[menu.selectedItem.CommandParameter];
        }
    }

    function shortTypeChanged(menu) {
        updateMenu(menu, 1, 'Moving Avg. Type');
    }

    function longPeriodChanged(number, args) {
        if (!checkValue(number)) {
            return;
        }
        updatePeriod(2, number.value);
    }

    function longTypeChanged(menu) {
        updateMenu(menu, 2, '@Html.Raw(Resources.Home.MovingAverages_MovingAvgType)');
    }

    function checkValue(number) {
        return number.value >= number.min && number.value <= number.max;
    }
</script>


@(Html.C1().FinancialChart()
.Id("movingAvg")
.Bind(Model)
.BindingX("X")
.ChartType(C1.Web.Mvc.Finance.ChartType.Line)
.Series(sers =>
    {
        sers.Add().Binding("Close").Name("BOX");
        sers.AddMovingAverage().Binding("Close").Period(5).Type(C1.Web.Mvc.Chart.MovingAverageType.Simple).Name("5 Day MA");
        sers.AddMovingAverage().Binding("Close").Period(20).Type(C1.Web.Mvc.Chart.MovingAverageType.Simple).Name("20 Day MA");
    })
.Tooltip(t => t.Content("tooltip")))

@section Settings{
<!-- "Short" MA Settings -->
<div class="panel-group" id="settingsShort">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a id="shortTitle">@Html.Raw(Resources.Home.MovingAverages_5DayMASettings)</a>
            </h4>
        </div>
        <div id="settingsBody" class="panel-collapse collapse in">
            <div class="panel-body">
                <ul class="list-inline">
                    <li>
                        <label>@Html.Raw(Resources.Home.MovingAverages_Period)</label>
                        @(Html.C1().InputNumber().Value(5).Min(2).Step(1).Format("n0").Max(Model.Count - 1).OnClientValueChanged("shortPeriodChanged"))
                    </li>
                    <li>
                        @(Html.C1().Menu().Header(Resources.Home.MovingAverages_Header1).MenuItems(mifb =>
                            {
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeSimple).CommandParameter("Simple");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeWeighted).CommandParameter("Weighted");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeExponential).CommandParameter("Exponential");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeTriangular).CommandParameter("Triangular");
                            }).OnClientItemClicked("shortTypeChanged"))
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- "Long" MA Settings -->
<div class="panel-group" id="settingsLong">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a id="longTitle">@Html.Raw(Resources.Home.MovingAverages_20DayMASettings)</a>
            </h4>
        </div>
        <div id="settingsBody" class="panel-collapse collapse in">
            <div class="panel-body">
                <ul class="list-inline">
                    <li>
                        <label>@Html.Raw(Resources.Home.MovingAverages_Period)</label>
                        @(Html.C1().InputNumber().Min(2).Value(20).Step(1).Format("n0").Max(Model.Count - 1).OnClientValueChanged("longPeriodChanged"))
                    </li>
                    <li>
                        @(Html.C1().Menu().Header(Resources.Home.MovingAverages_Header2).MenuItems(mifb =>
                            {
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeSimple).CommandParameter("Simple");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeWeighted).CommandParameter("Weighted");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeExponential).CommandParameter("Exponential");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeTriangular).CommandParameter("Triangular");
                            }).OnClientItemClicked("longTypeChanged"))
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
}


@section Description{
    <p>@Html.Raw(Resources.Home.MovingAverages_Text0)</p>
}
@section Summary{
    <p>@Html.Raw(Resources.Home.MovingAverages_Text1)</p>
}