機能

ポイント&フィギュア

ポイント&フィギュア

ポイントアンドフィギュアチャートは、フィルタ処理された株価の動きを表す X と O の列で構成されます。

機能

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

設定

説明

ポイントアンドフィギュアチャートは、フィルタ処理された株価の動きを表す X と O の列で構成されます。 X の列が株価の上昇を表し、O の列が株価の下落を表します。

using System.Collections.Generic;
using FinancialChartExplorer.Models;
using Microsoft.AspNetCore.Mvc;

namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult PointAndFigure()
        {
            ViewBag.FbData = FbData.GetDataFromJson();
            ViewBag.RsData = FbData.GetReativeStrengthDataFromJson();
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreatePointAndFigureSettings(), DefaultValues = CreatePointAndFigureDefaultValues() };
            return View();
        }

        private static IDictionary<string, object[]> CreatePointAndFigureSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"Fields", new object[]{"HighLow","Close"}},
                {"Reversal", new object[]{"2","3","4","5"}},
                {"Scaling", new object[]{"Traditional", "Fixed", "Dynamic"}},
                {"BoxSize", new object[]{"1","2","3","4","5"}},
                {"Period", new object[]{"10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30"}},
                {"Stroke", new object[]{"LightBlue","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}},
                {"AltStroke", new object[]{"LightBlue","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}},
            };

            return settings;
        }

        private static IDictionary<string, object> CreatePointAndFigureDefaultValues()
        {
            return new Dictionary<string, object>
            {
                { "Reversal", "3" },
                { "Period", "20" },
                { "Stroke", "Black" },
                { "AltStroke", "Red" }
            };
        }
    }
}
@{
    IEnumerable<FinanceData> fbData = ViewBag.FbData;
    IEnumerable<FinanceData> rsData = ViewBag.RsData;
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
    var chartStyle = new SVGStyle() { Stroke = "Black" };
    var chartAltStyle = new SVGStyle() { Stroke = "Red" };
}

<script type="text/javascript">
    c1.documentReady(function () {
        var scaling = wijmo.Control.getControl('#Scaling');
        var boxSize = wijmo.Control.getControl('#BoxSize');
        var period = wijmo.Control.getControl('#Period');

        function updateStatus(s) {
            boxSize.isDisabled = s.selectedIndex != 1;
            period.isDisabled = s.selectedIndex != 2;
        }

        updateStatus(scaling);
        scaling.selectedIndexChanged.addHandler(function (s, e) {
            updateStatus(s);
        });

        function updateX(cv) {
            var items = cv.sourceCollection;
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                item['X'] = wijmo.Globalize.parseDate(item['X'], "yyyy-MM-dd");
            }
        }

        updateX(c1.getService("cvFb"));
        updateX(c1.getService("cvRs"));
    });

    function customChangeFields(control, value) {
        var options = getPointAndFigureOptions(control);
        options.fields = wijmo.chart.finance.DataFields[value];
        control.invalidate();
    }

    function customChangeReversal(control, value) {
        var options = getPointAndFigureOptions(control);
        options.reversal = +value;
        control.invalidate();
    }

    function customChangeScaling(control, value) {
        var options = getPointAndFigureOptions(control);
        options.scaling = wijmo.chart.finance.PointAndFigureScaling[value];
        control.invalidate();
    }

    function customChangeBoxSize(control, value) {
        var options = getPointAndFigureOptions(control);
        options.boxSize = +value;
        control.invalidate();
    }

    function customChangePeriod(control, value) {
        var options = getPointAndFigureOptions(control);
        options.period = +value;
        control.invalidate();
    }

    function getPointAndFigureOptions(control) {
        var options = control.options;
        if (!options) {
            options = control.options = {};
        }

        var pointAndFigure = options.pointAndFigure;
        if (!pointAndFigure) {
            pointAndFigure = options.pointAndFigure = {};
        }

        return pointAndFigure;
    }

    function customChangeStroke(control, value) {
        setColor(control, "style", "stroke", value);
    }

    function customChangeAltStroke(control, value) {
        setColor(control, "altStyle", "stroke", value);
    }

    function setColor(control, styleName, attName, value) {
        control.series[0][styleName][attName] = value;
        control.invalidate();
    }

        function changeStockData(menu) {
            var chart = wijmo.Control.getControl('#@demoSettingsModel.ControlId');
            var fields = wijmo.Control.getControl('#Fields');

            // update header
            menu.header = "@Html.Raw(Home.PointAndFigure_StockData) <b>" + menu.selectedItem.Header + "</b>";

            // change the items source and default fields setting
            var value = menu.selectedItem.CommandParameter;
            switch (value) {
                case "rs":
                    chart.itemsSource = c1.getService("cvRs");
                    fields.selectedIndex = 1;
                    break;
                case "fb":
                default:
                    chart.itemsSource = c1.getService("cvFb");
                    fields.selectedIndex = 0;

                    break;
            }

            // update fields
            changeFields(fields);
        }

</script>

<c1-menu id="stockData" header="@(Html.Raw(Home.PointAndFigure_StockData) + " <b>" + Home.PointAndFigure_FacebookIncFB +"</b>")" item-clicked="changeStockData">
    <c1-menu-item header="@Html.Raw(Home.PointAndFigure_FacebookIncFB)" command-parameter="@("fb")"></c1-menu-item>
    <c1-menu-item header="@Html.Raw(Home.PointAndFigure_FBRelativeToNASDAQNDX)" command-parameter="@("rs")"></c1-menu-item>
</c1-menu>

<c1-items-source id="cvFb" source-collection="@fbData"></c1-items-source>
<c1-items-source id="cvRs" source-collection="@rsData"></c1-items-source>

<c1-financial-chart id="@demoSettingsModel.ControlId" binding-x="X" chart-type="PointAndFigure" items-source-id="cvFb"
                    point-and-figure-fields="HighLow" point-and-figure-reversal="3" point-and-figure-scaling="Traditional"
                    point-and-figure-box-size="1" point-and-figure-period="20">
    <c1-financial-chart-series binding="High,Low,Open,Close" name="FB" style="@chartStyle" alt-style="chartAltStyle"></c1-financial-chart-series>
    <c1-flex-chart-tooltip content="{x:d}<br/>{y}"></c1-flex-chart-tooltip>
</c1-financial-chart>

@section Description{
    <p>@Html.Raw(Home.PointAndFigure_Text0)</p>
}
@section Summary{
    <p>@Html.Raw(Home.PointAndFigure_Text1)</p>
}