機能
ポイント&フィギュア
ポイント&フィギュア
ポイントアンドフィギュアチャートは、フィルタ処理された株価の動きを表す 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>
}