FinancialChart for UWP
2018.11.20 更新

グレープシティ株式会社

FinancialChart for UWP
目次
FinancialChart for UWPの概要

2

主な特長

3

クイックスタート4

手順 1：フォームへの FinancialChart の追加

4-5

手順 2：データソースへの FinancialChart の連結5-7

手順 3：アプリケーションの実行

7-8

株価チャートタイプ
分析機能

19

傾向線

19-21

移動平均

21-22

インジケータ

22-23

ATR

23-27

RSI

27-29

CCI

29-32

Williams %R

32-34

Stochastic

34-41

MACD

41-47

オーバーレイ

47

Bollinger Bands

47-53

Envelopes

53-58

Ichimoku Clouds

58-62

フィボナッチツール62

フィボナッチリトレースメント

62-68

フィボナッチアーク

68-74

フィボナッチファン

74-79

フィボナッチタイムゾーン

79-85

ユーザー操作機能

1

9-18

86

範囲セレクタ

86-88

アニメーション

88-90

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPFinancialChart for UWPの概要の概要
FinancialChart for UWP は、株価のトレンドチャートを作成できる、使いやすい視覚化コントロールです。 このコントロール
で事前定義されている株価インジケータと専用のチャートタイプを使用して、財務アプリケーションでテクニカル分析を実行できます。さらに、傾向線、移動平均、範囲セレクタなどの分析ツールを使用して、データを操作しながら傾向を分析できます。
以下のセクションでは、FinancialChart for UWPのすべての面について詳細に説明します。
主な特長
クイックスタート
株価チャートタイプ
分析機能
ユーザー操作2

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
主な特長
チャートタイプ
折れ線グラフを散布図などの他のチャートタイプに変更できます。それには、 ChartType プロパティを設定するだけです。15 種類のチャートタイプから選択できます。
範囲セレクタFinancialChart の実行時のデータ表示範囲を調整します。
傾向線
データのトレンドを可視化し、予測の問題点を分析します。
ツールチップ
ツールチップを使用してチャートの値を表示できます。
ヘッダーとフッター
単純なプロパティを使用して、タイトルやフッターテキストを設定できます。
凡例
必要に応じて凡例の位置を変更できます。
新値足ラインまたは縦長のボックスを使用して、資産や市場の価格変化を示します。
注釈
株価チャートの特定のデータポイントに重要なイベントやニュースをアタッチします。
移動平均
データセット全体の一部から一連の平均値を求めてデータポイントを分析します。
インジケータATR（Average True Range）、RSI（相対力指数）、CCI（商品チャンネル指数）、ウィリアムズ %R などのテクニカルインジ
ケータを使用して、商品の価格変化や取引量動向を分析および予測します。

3

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
クイックスタート
このクイックスタートでは、FinancialChart for UWP を使用してシンプルなアプリケーションを作成し、Visual Studio で実行するプロセスを説明します。
FinancialChart コントロールをすばやく体験するには、次の手順を実行します。
1. フォームへの FinancialChart の追加
2. データソースへの FinancialChart の連結
3. アプリケーションの実行

手順 1：フォームへの：フォームへの FinancialChart の追加
この手順では、新しい Visual Studio アプリケーションを作成し、適切な参照をプロジェクトに追加します。さらに、FinancialChart コントロー
ルを作成するための XAML マークアップを追加します。
1. 新しい ユニバーサル Windows アプリケーションを作成します。
1. ［ファイル］［ファイル］→［新規作成］［新規作成］→［プロジェクト］［プロジェクト］を選択します。［新しいプロジェクト］［新しいプロジェクト］ダイアログボックスが開きます。
2. ［テンプレート］［テンプレート］→［［Visual C#］］→［［Windows］］→［ユニバーサル］［ユニバーサル］を選択します。テンプレートリストで、［空のアプリ（ユニバー［空のアプリ（ユニバー
サル Windows）］）］を選択します。
3. アプリケーションに名前を付け、［［OK］］をクリックします。新しいアプリケーションが作成されました。
2. MainPage.xaml ファイルを開き、C1FinancialChart コントロールをドラッグアンドドロップします。 次の参照がプロジェクトに追加されます。
C1.UWP.dll
C1.UWP.DX.dll
C1.UWP.FlexChart.dll
C1.UWP.FlexChart.Finance.dll
参照が追加されない場合は、手動で追加してください。それには ［参照］ フォルダを ソリューションエクスプローラー で右クリック
し、［追加］、［追加］→［新しい参照］［新しい参照］を選択します。
次のように、必要な名前空間とコントロールマークアップが MainPage.xaml に追加されます。
XAML
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FinancialChart"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Finance="using:C1.Xaml.Chart.Finance"
x:Class="FinancialChart.MainPage1"
mc:Ignorable="d"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart ChartType="HeikinAshi" HorizontalAlignment="Left"
Height="300" Name="financialChart" VerticalAlignment="Top" Width="300"><Finance:FinancialSeries Binding="High,Low,Open,Close,Volume" BindingX="Date"><Finance:FinancialSeries.ItemsSource><Finance:QuoteCollection><Finance:Quote Close="23.23" Date="01/23/15" High="24.73"
Low="20.16" Open="20.2" Volume="42593223"/><Finance:Quote Close="22.6" Date="01/26/15" High="24.39"
Low="22.5" Open="23.67" Volume="8677164"/><Finance:Quote Close="21.3" Date="01/27/15" High="22.47"
Low="21.17" Open="22" Volume="3272512"/><Finance:Quote Close="19.78" Date="01/28/15" High="21.84"
Low="19.6" Open="21.62" Volume="5047364"/><Finance:Quote Close="18.8" Date="01/29/15" High="19.95"
Low="18.51" Open="19.9" Volume="3419482"/></Finance:QuoteCollection></Finance:FinancialSeries.ItemsSource></Finance:FinancialSeries>

4

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP</Finance:C1FinancialChart></Grid></Page>FinancialChartコントロールが正常にプロジェクトに追加されます。

手順 2：データソースへの：データソースへの FinancialChart の連結
この手順では、FinancialChartコントロールを有効なデータソースに連結します。
1. 次のようにデータソースを作成します。
1. プロジェクトを右クリックし、［追加］［追加］→［クラス］［クラス］を選択します。
2. テンプレートの一覧から［クラス］［クラス］を選択し、「DataService」と名前を付け、［追加］［追加］をクリックします。
3. 次のコードを DataService クラスに追加してデータを生成します。
Visual BasicClass DataService
Public Shared Function CreateData() As List(Of DataItem)
Dim data = New List(Of DataItem)()
Dim dt As DateTime = DateTime.Today
data.Add(New DataItem(dt.[Date], 79))
data.Add(New DataItem(dt.[Date].AddDays(-7), 78))
data.Add(New DataItem(dt.[Date].AddDays(-14), 73))
data.Add(New DataItem(dt.[Date].AddDays(-21), 74))
data.Add(New DataItem(dt.[Date].AddDays(-28), 76))
data.Add(New DataItem(dt.[Date].AddDays(-35), 74))
data.Add(New DataItem(dt.[Date].AddDays(-42), 75))
data.Add(New DataItem(dt.[Date].AddDays(-49), 75))
data.Add(New DataItem(dt.[Date].AddDays(-56), 80))Return data
End Function
End Class
Public Class DataItem
Public Sub New(date__1 As DateTime, sales__2 As Integer)[Date] = date__1
Sales = sales__2
End Sub
Public Property [Date]() As DateTime
Get
Return m_Date
End GetSet
m_Date = ValueEnd SetEnd Property
Private m_Date As DateTime
Public Property Sales() As Integer
Get
Return m_Sales
End GetSet
m_Sales = ValueEnd SetEnd Property
Private m_Sales As Integer
End ClassC#class DataService{
public static List<DataItem> CreateData(){
var data = new List<DataItem>();
DateTime dt = DateTime.Today;

5

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
data.Add(new DataItem(dt.Date, 79));
data.Add(new DataItem(dt.Date.AddDays(-7), 78));
data.Add(new DataItem(dt.Date.AddDays(-14), 73));
data.Add(new DataItem(dt.Date.AddDays(-21), 74));
data.Add(new DataItem(dt.Date.AddDays(-28), 76));
data.Add(new DataItem(dt.Date.AddDays(-35), 74));
data.Add(new DataItem(dt.Date.AddDays(-42), 75));
data.Add(new DataItem(dt.Date.AddDays(-49), 75));
data.Add(new DataItem(dt.Date.AddDays(-56), 80));
return data;}}
public class DataItem{
public DataItem(DateTime date, int sales){
Date = date;
Sales = sales;}public DateTime Date { get; set; }public int Sales { get; set; }}2. 次のように、データをFinancialChartに連結します。
1. <Grid> タグを編集して次のマークアップを作成し、FinancialChartにデータを提供します。
MainPage.xaml<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Quick_Start"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Finance="using:C1.Xaml.Chart.Finance"
x:Class="Quick_Start.MainPage"
DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
mc:Ignorable="d"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart x:Name="financialChart" ChartType="LineSymbols"
ItemsSource="{Binding DataContext.Data}" HorizontalAlignment="Left" Height="321"VerticalAlignment="Top" Width="620" Margin="79,85,0,0"><Finance:FinancialSeries AxisX="{x:Null}" AxisY="{x:Null}" Binding="Sales"
BindingX="Date" Chart="{x:Null}" SeriesName="{x:Null}"></Finance:FinancialSeries></Finance:C1FinancialChart></Grid></Page>2. コードビュー（MainPage.xaml.cs）に切り替えます。次のコードを MainPage クラスに追加して、チャートにデータをプロットします。
MainPage.xaml.vb
Partial Public NotInheritable Class MainPage
Inherits Page
Private _data As List(Of DataItem)
Public Sub New()
Me.InitializeComponent()
financialChart.AxisX.Format = "M月d日"
End Sub
Public ReadOnly Property Data() As List(Of DataItem)
Get
If _data Is Nothing Then_data = DataService.CreateData()
End IfReturn _data

6

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPEnd GetEnd Property
End Class
MainPage.xaml.cs
public sealed partial class MainPage : Page{
private List<DataItem> _data;
public MainPage(){this.InitializeComponent();
financialChart.AxisX.Format = "M月d日";}
public List<DataItem> Data{
get{if (_data == null){_data = DataService.CreateData();}return _data;}}}
FinancialChartコントロールは、データソースに正常にバインドされています。

手順 3：アプリケーションの実行：アプリケーションの実行
この手順では、アプリケーションを実行し、出力を確認します。
アプリケーションを実行すると、次の出力が表示されます。

7

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
これで、単純な FinancialChart アプリケーションを作成できました。

8

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
株価チャートタイプ
FinancialChart には、金融データの視覚化要件に対応する 15 のチャートタイプがあります。ChartType プロパティを設定して、 FinancialChart コントロールのチャートタイプを設定できます。このプロパティは、FinancialChartType 列挙に含まれる値を受け取ります。
次の表に、FinancialChart のすべてのチャートタイプを示します。
面グラフ

アームズローソクボリュームチャー ローソク足チャート
ト

縦棒グラフ

カラムボリュームチャート

ローソクボリュームチャート

エクイボリュームチャー 平均足チャートト

HighLowOpenClose チャー カギ足チャートト

折れ線グラフ

新値足チャート

折れ線グラフ（シンボル付き） 練行足チャート

散布図

ポイントアンドフィギュアチャー
ト

次のコードスニペットでは、ChartType プロパティを設定しています。
XAML<Finance:C1FinancialChart x:Name="financialChart" ChartType="Scatter"
ItemsSource="{Binding DataContext.Data}" HorizontalAlignment="Left" Height="321"VerticalAlignment="Top" Width="620" Margin="79,85,0,0"><Finance:FinancialSeries AxisX="{x:Null}" AxisY="{x:Null}"Binding="Sales" BindingX="Date" Chart="{x:Null}" SeriesName="{x:Null}"></Finance:FinancialSeries></Finance:C1FinancialChart>
Code
Visual Basic

copyCode' チャートタイプを設定します。
financialChart.ChartType = C1.Chart.Finance.FinancialChartType.ScatterC#

copyCode// チャートタイプを設定します。
financialChart.ChartType = C1.Chart.Finance.FinancialChartType.Scatter;

面グラフ
面グラフは、同じ系列のデータポイントどうしを線で結び、この線の下の領域を塗りつぶして量を示します。新しい系列は、それぞれ前の系列の上に表示されます。系列は、個別に描画することも、積層にして描画することもできます。これらのグラフ
は、関連する属性間の長期にわたるトレンドを示す場合によく使用されます。

9

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

先頭に移動

アームズローソクボリュームチャート
アームズローソクボリュームチャートは、エクイボリュームおよびローソクボリュームチャートタイプの組み合わせとして、
Richard Arms によって作成されました。このチャートタイプのデータは、FinancialChart または FinancialSeries 連結プロパ
ティを使用して、「highProperty, lowProperty, openProperty, closeProperty, volumeProperty」形式のカンマ区切り値で定義できます。このチャートタイプは、FinancialChart レベルでのみ使用できます。FinancialSeries オブジェクトに適用することはできません。現在は、1 つの FinancialChart に 1 セットのボリュームデータだけがサポートされています。

先頭に移動

ローソク足チャート
ローソク足チャートは、Hi-Lo-Open-Close チャートの特殊なタイプで、株価の始値、終値、高値、低値を示します。ローソク足
チャートは、横棒グラフと折れ線グラフを合わせたような形式で経時的な値の範囲を表します。ローソクと呼ばれるビジュアル要素で構成され、ローソクは胴体、上ヒゲ、下ヒゲの 3 つの要素から成ります。
胴体
胴体は始値と終値を表現し、上ヒゲ
上ヒゲと下ヒゲ
下ヒゲはそれぞれ高値と安値を表現します。
10

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
白抜きの胴体
白抜きの胴体は、株価が上昇したことを示します（終値が始値より高い）。
黒塗りの胴体黒塗りの胴体は、株価が下落したことを示します（始値が終値より高い）。
ヒゲ線のサイズは高値と安値で決定され、棒のサイズは、始値と終値で決定されます。棒は、終値が始値より高いか低いかに基づいて異なる色で表示されます。このチャートタイプのデータは、FinancialChart または FinancialSeries 連結プロパティを使用して、「highProperty, lowProperty, openProperty, closeProperty」形式のカンマ区切り値で定義できます。
ローソク足では、系列内のデータポイントごとに 5 つの値があります。
x：X 軸方向の日付の位置を決定します。
high：その日の最高値を決定し、それを Y 軸方向にローソクの上端としてプロットします。
low：その日の最安値を決定し、それを Y 軸方向にローソクの下端としてプロットします。
open：その日の始値を決定します。
close：その日の終値を決定します。

先頭に移動

ローソクボリュームチャート
ローソクボリュームチャートは、各棒の幅が Volume 値で決まること以外は、標準のローソク足チャートと同じです。このチャー
トタイプのデータは、FinancialChart または FinancialSeries 連結プロパティを使用して、「highProperty, lowProperty,
openProperty, closeProperty, volumeProperty」形式のカンマ区切り値で定義できます。

先頭に移動

11

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
縦棒グラフ
縦棒グラフは、各系列を棒の形式で表し、さまざまなカテゴリの項目の値を比較できます。1 つ以上の項目の値を縦棒として Y
軸に表示し、項目やカテゴリを X 軸に配置します。

先頭に移動

カラムボリュームチャート
カラムボリュームチャートは、各棒の幅が Volume 値で決まること以外は、標準の縦棒グラフと同じです。このチャートタイプのデータは、FinancialChart または FinancialSeries 連結プロパティを使用して、「yProperty, volumeProperty」形式のカンマ区切り値で定義できます。

先頭に移動

エクイボリュームチャート
EquiVolume チャートはローソク足チャートに似ていますが、これらのチャートではローソク足がさまざまな幅の四角形のボック
ス（上ヒゲなし）に置き換えられます。EquiVolume ボックスには、高値および安値の成分と、3 つ目の次元として各ボックスの幅を決定する Volume が含まれます。色は、終値の数字が直前のボックスの終値よりも上か下かを表します。

12

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

先頭に移動

平均足チャート
平均足チャートは日本のローソク足チャートのバリエーションで、ローソク足チャートからノイズを取り除き、移動平均によく似た動作をするように設計されています。このチャートを使用すると、トレンド、潜在的反転ポイントなどのテクニカル分析パターン
を見極めることができます。

先頭に移動

HighLowOpenClose チャート
HighLowOpenClose チャートは 4 つの独立した値を組み合わせて、高値、安値、始値、終値のデータ値を系列内のデータポ
イントごとに提供します。ローソク足チャートと同じ情報を表示しますが、始値が左向きの線で、終値が右向きの線で表されます。

13

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

先頭に移動

カギ足チャート
カギ足チャートは、一連の垂直線を連結して、需要と供給のトレンドを示します。線の太さと方向は、株価の動きによって決まります。終値が直前の終値と同じ方向に進む場合は、そのカギ足ラインが延長されます。しかし、終値があらかじめ設定した反転幅以上に反転した場合は、次の列に、新しいカギ足ラインが反対方向に引かれます。細い線は、価格が直前の底値を下回ったこと（売り）を、太い線は、価格が直前の高値を上回ったこと（買い）を示します。

先頭に移動

折れ線グラフ折れ線グラフは、系列内の異なるデータポイントを直線で接続することで、一定期間の傾向を表示します。入力を X 軸に沿って等間隔に並ぶカテゴリ情報として取り扱います。

14

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

先頭に移動

新値足チャート
新値足チャートは、垂直のボックスまたはラインを使用して、資産や市場の価格変動を示します。値動きは、ボックスの色とスタイルで表されます。直前のボックスのトレンドが続く値動きは同じ色で表され、反対方向のトレンドを示す値動きは異なる色/スタイルで示されます。反対方向のトレンドは、値が直前 n 個のボックスまたはラインの最大/最小値を超えた場合にのみ描画されます。この個数は、newLineBreaks オプションで決定されます。

先頭に移動

折れ線シンボルグラフ
折れ線シンボルグラフは、折れ線グラフと散布図グラフを組み合わせたグラフです。等間隔に並ぶデータの傾向を表示し、同じイベントに関連付けられた 2 つの変数の関係を視覚化します。シンボルを使用してデータポイントをプロットし、データポイン
ト間を直線で接続します。

15

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

先頭に移動

練行足チャート
練行足チャートは時間を無視し、指定された金額に一致する価格の変化に注目します。一様なサイズのブロックを使用して株価の動きを示します。価格が、新しいブロックの描画に必要なあらかじめ設定された boxSize オプションより大きい値または小さい値に変化すると、次の列に新しいブロックが描画されます。ボックスの色と方向の変化は、トレンドの反転を示します。

先頭に移動

散布図
散布図グラフは別名 XY グラフと呼ばれ、複数のデータ系列の項目間の関係を表します。簡単に言えば、X 値と Y 値を 2 つの軸にプロットしたものです。データポイントは接続されず、異なるシンボルを使用してカスタマイズできます。通常、このチャー
トタイプは科学的データを表現するために使用され、予測データや結果データに含まれる集中データのばらつきを強調できます。

16

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

先頭に移動

ポイントアンドフィギュアチャート
ポイントアンドフィギュアチャートは、積み重ねた X または O を列にして並べて株価のトレンドを明示します。時間ベースのチャートとは異なり、このチャートは、時間を考慮せずに株価の変動だけに注目します。X が株価の上昇を表し、O が株価の下落を表します。
ボックスサイズを指定できます。ボックスサイズは、1 つの X と O がそれぞれ表す額です。ボックスサイズの額だけ株価が上昇すると、X が記録されます。さらに上昇すると、その上にもう 1 つ X が積み重ねて記録されます。一方、逆の傾向を示すと、ボックスサイズの額だけ株価が下落したところで、次の列に O が記録されます。すべての株価の変動を記録しても冗長なだ
けなので、反転幅を設定して、株価の反転を記録する 1 列内の最小の X または 0 の数を指定できます。指定した反転幅になるまでは、株価の反転が発生しても無視されます。
FinancialChart は、ポイントアンドフィギュアチャートの標準スケーリング、固定スケーリング、動的スケーリングをサポートしま
す。標準スケーリングは、ChartCraft よって事前定義された株価範囲テーブルを使用してボックスのサイズを定義します。固定スケーリングでは、エンドユーザーがボックスサイズを指定でき、動的スケーリングでは、計算された ATR 値をボックスサイ
ズとして使用します。

17

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

先頭に移動

18

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
分析機能
FinancialChart for UWP は、金融データをシステマティックに効率よく分析できるさまざまな分析機能を提供します。分析機
能には、傾向線、移動平均、各種テクニカルインジケータがあります。これらのツールを使用して、予測の問題点を分析した
り、データ全体を検証したり、資産の市場方向性を予測することができます。
FinancialChart 分析機能の詳細については、以下のリンクをクリックしてください。
傾向線
移動平均
インジケータオーバーレイフィボナッチツール傾向線
傾向線は、テクニカル分析によってさまざまな傾向を特定および確認するために重要なツールです。2 つ以上の価格ポイントを直線で接続する傾向線は、将来の抵抗線にも支持線にもなります。基本的に傾向線は、データの傾向を表し、予測の問題点を検討するために使用されます。傾向線は株価チャートでよく使用されますが、株価のテクニカル分析で使用される傾向インジケータである MACD（移動平均
収束発散法）や、金融市場の分析で使用されるテクニカルインジケータである RSI（相対力指数）などのテクニカル分析グラフと組み合わせて使用できます。
サポートされる FitType は、FitType プロパティを使用して設定できます。このプロパティは FitType 列挙に含まれる値を受け取ります。
各トレンドタイプは、そのタイプの計算式に基づいて描画されます。
タイプ

説明

Average X

チャートデータから X の平均値を計算し、傾向線を描画します。

Average Y

チャートデータから Y の平均値を計算し、傾向線を描画します。

Exponential

データ値の増減が徐々に大きくなっていく場合に使用すると便利な曲線です。データにゼロまたは負の値がある場合は、指数傾向線は作成できません。

Fourier波のような関数を単純な正弦波の組み合わせとして表示する方法です。フーリエ級数式を使用して作成されます。

Linear

線形傾向線は、最高の適合度を持つ直線です。データポイントパターンが直線状であれば、データは線形です。R-2 乗値が 1 またはそれに近い場合は線形傾向線がフィットします。

Logarithmic

最高の適合度を持つ曲線で、データの視覚効果を高めるために使用されます。データの変化率が急速に増加または減少してから平坦化する場合に使用されます。正の値も負の値も使用できます。

Max X

チャートから X の最大値を取り、それを使用して傾向線を描画します。

Max Y

チャートから Y の最大値を取り、それを使用して傾向線を描画します。

Min X

チャートから X の最小値を取り、それを使用して傾向線を描画します。

Min Y

チャートから Y の最小値を取り、それを使用して傾向線を描画します

Polynomial

データが振幅の形状を表す場合に使用されるねじれた線です。大きなデータセットに対して損益を分析する際に便利です。

Power

一定の率で増加する計算式に沿ったデータセットでの使用に適しています。たとえば、1 秒ごとの車両の加速量などです。

Trendline インスタンスを作成し、Trendline クラスの FitType、Order、SampleCount などのプロパティを設定します。傾向線のインス
タンスを Series コレクションに追加します。

19

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPXAML<Chart:C1FinancialChart Binding="Sales" BindingX="Date" x:Name="financialChart"
ChartType="LineSymbols" ItemsSource="{Binding DataContext.Data}" HorizontalAlignment="Left"
Height="321" VerticalAlignment="Top" Width="620" Margin="79,85,0,0"><Finance:Series AxisX="{x:Null}" AxisY="{x:Null}" Chart="{x:Null}" SeriesName="{x:Null}"></Finance:Series><FlexChart:TrendLine FitType="Fourier" Order="10" SampleCount="150" x:Name="trendLine" /></Chart:C1FinancialChart>
Code
Visual Basic

copyCode' TrendLineのインスタンスを作成します。
Dim trendline As New C1.Xaml.Chart.TrendLine()' 傾向線のプロパティを設定します。
trendline.FitType = C1.Chart.FitType.Fourier
trendline.SampleCount = 150
trendline.Order = 10
' 系列コレクションにTrendLineのインスタンスを追加します。
financialChart.Series.Add(trendline)C#

copyCode// TrendLineのインスタンスを作成します。
C1.Xaml.Chart.TrendLine trendline = new C1.Xaml.Chart.TrendLine();// 傾向線のプロパティを設定します。
trendline.FitType = C1.Chart.FitType.Fourier;trendline.SampleCount = 150;
trendline.Order = 10;// 系列コレクションにTrendLineのインスタンスを追加します。
financialChart.Series.Add(trendline);

20

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

移動平均
移動平均は、株価チャートで使用される、移動平均による傾向線です。データセット全体の一部の平均値から系列を作成することで、デー
タポイントを分析します。
FinancialChart では、MovingAverage クラスのインスタンスを作成し、Type プロパティを MovingAverageType 列挙に含まれる次の値のいずれかに設定します。
Exponential：直近 n 個の値の加重平均で、重み付けは 1 つ前の値と比較して指数関数的に減っていきます。
Simple：直近 n 個の値の平均。
Triangular：直近 n 個の値の加重平均で、結果は 2 回の平滑化を行った単純移動平均と同じです。
Weighted：直近 n 個の値の加重平均で、重み付けは 1 つ前の値と比較して 1 ずつ減っていきます。
ChartType プロパティを設定して、移動平均のチャートタイプを指定できます。このプロパティは、FinancialChartType 列挙に含まれる
値を受け取ります。チャートタイプの詳細については、「株価チャートタイプ」を参照してください。
さらに、Period プロパティを使用して、移動平均の期間をそれぞれ指定できます。これらのプロパティを設定したら、移動平均を Series コ
レクションに追加します。
XAML<Chart:C1FinancialChart Binding="Sales" BindingX="Date" x:Name="financialChart"
ChartType="Line" ItemsSource="{Binding DataContext.Data}" HorizontalAlignment="Left"
Height="321" VerticalAlignment="Top" Width="620" Margin="79,85,0,0"><Finance:Series AxisX="{x:Null}" AxisY="{x:Null}" Chart="{x:Null}" SeriesName="{x:Null}"></Finance:Series><Chart:MovingAverage x:Name="ma" Type="Weighted" ChartType="Line" Period="2"/></Chart:C1FinancialChart>
Code
Visual Basic

copyCode' MovingAverageのインスタンスを作成します。
Dim ma As New C1.Xaml.Chart.Finance.MovingAverage()' Moving Averageのインスタンスのプロパティを設定します。
ma.Type = C1.Chart.MovingAverageType.Weighted

21

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
ma.ChartType = C1.Chart.Finance.FinancialChartType.Line
ma.Period = 2' 系列コレクションにMovingAverageのインスタンスを追加します。
financialChart.Series.Add(ma)C#copyCode// MovingAverageのインスタンスを作成します。
C1.Xaml.Chart.Finance.MovingAverage ma = new C1.Xaml.Chart.Finance.MovingAverage();// Moving Averageのインスタンスのプロパティを設定します。
ma.Type = C1.Chart.MovingAverageType.Weighted;
ma.ChartType = C1.Chart.Finance.FinancialChartType.Line;
ma.Period = 2;// 系列コレクションにMovingAverageのインスタンスを追加します。
financialChart.Series.Add(ma);インジケータテクニカルインジケータは、元のデータセットに 1 つ以上の数式を適用して計算することにより派生したデータのセットです。テ
クニカルインジケータは、一般に資産の市場の方向を予測するために使用され、通常は元のデータと Y 軸のスケールが異なるため、別にプロットされます。
UWP Edition は、財務アプリケーションで簡単に使用できる、FinancialChart コントロール用のテクニカルインジケータをサポートしています。これらの株価インジケータは、チャートパターンとしてプロットされ、テクニカル分析の基礎を形成します。
テクニカルインジケータの Y 軸のスケールは株価または出来高チャートのデータのスケールとは異なるため、一般にインジ
ケータは、元の株価または出来高のデータとは別にプロットされることに注意してください。
以下のセクションでは、FinanicalChart for UWP でサポートされているさまざまな株価チャートインジケータについて説明しま
す。
ATR
22

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
RSI
CCI
Williams %R
Stochastic
MACD

ATR
ATR（Average True Range）は、資産のボラティリティを測定するテクニカルインジケータです。価格の動向を示すのではなく、価格のボ
ラティリティの程度を示します。ATR は、通常、14 期間に基づいて、日中、日、週、または月単位で計算できます。ボラティリティが高い
株は ATR が高くなる一方、ボラティリティが低い株は ATR が低くなります。
また、FinancialChart では、実行時に GetValues() メソッドを使用して、計算された ATR 値を取得できます。これにより、アプリケーショ
ンでアラートを作成したり、動的データを使用する際にログを取ることができます。
次のコードスニペットは、ATR クラスのインスタンスを作成して、Average True Indicator を使用します。また、このサンプルはクラス
DataService を使用して、株価チャートのデータを取得します。

DataService.vb
Public Class DataService
Private _companies As New List(Of Company)()
Private _cache As New Dictionary(Of String, List(Of Quote))()Private Sub New()_companies.Add(New Company() With {.Symbol = "box",.Name = "Box Inc"})
_companies.Add(New Company() With {.Symbol = "fb",.Name = "Facebook"})
End Sub
Public Function GetCompanies() As List(Of Company)
Return _companies
End Function
Public Function GetSymbolData(symbol As String) As List(Of Quote)
If Not _cache.Keys.Contains(symbol) Then
Dim path As String = String.Format("FinancialChartExplorer.{0}.json", symbol)
Dim asm As Assembly = Me.[GetType]().GetTypeInfo().Assembly
Dim stream As Stream = asm.GetManifestResourceStream(path)
Dim ser As New DataContractJsonSerializer(GetType(Quote()))
Dim data As Quote() = CType(ser.ReadObject(stream), Quote())
Dim dataList As List(Of Quote) = data.ToList()
If IsWindowsPhoneDevice() Then
dataList = dataList.Take(20).ToList()
End If_cache.Add(symbol, dataList)
End IfReturn _cache(symbol)
End Function
Function IsWindowsPhoneDevice() As Boolean
If Windows.Foundation.Metadata.ApiInformation.
IsTypePresent("Windows.Phone.UI.Input.HardwareButtons") Then
Return True
End IfReturn False
End Function

23

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Shared _ds As DataService
Public Shared Function GetService() As DataService
If _ds Is Nothing Then_ds = New DataService()
End IfReturn _ds
End Function
End Class
Public Class Quote
Public Property [date]() As String
Public Property high() As Double
Public Property low() As Double
Public Property open() As Double
Public Property close() As Double
Public Property volume() As Double
End Class
Public Class Company
Public Property Symbol() As String
Public Property Name() As String
End Class
DataService.cs
public class DataService{
List<Company> _companies = new List<Company>();Dictionary<string, List<Quote>> _cache = new Dictionary<string, List<Quote>>();
private DataService(){_companies.Add(new Company() { Symbol = "box", Name = "Box Inc" });_companies.Add(new Company() { Symbol = "fb", Name = "Facebook" });}public List<Company> GetCompanies(){
return _companies;}
public List<Quote> GetSymbolData(string symbol){
if (!_cache.Keys.Contains(symbol)){string path = string.Format("FinancialChartExplorer.Resources.{0}.json", symbol);
Assembly asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);var dataList = data.ToList();if (IsWindowsPhoneDevice()){
dataList = dataList.Take(20).ToList();}_cache.Add(symbol, dataList);}
return _cache[symbol];}bool IsWindowsPhoneDevice(){
if (Windows.Foundation.Metadata.ApiInformation.
IsTypePresent("Windows.Phone.UI.Input.HardwareButtons")){
return true;

24

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP}
return false;}
static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
public class Quote{
public string date { get; set; }public double high { get; set; }public double low { get; set; }public double open { get; set; }public double close { get; set; }public double volume { get; set; }}public class Company{
public string Symbol { get; set; }public string Name { get; set; }}Visual Basic
Partial Public Class Indicators
Inherits Page
Private dataService As DataService = dataService.GetService()
Private atr As New ATR() With {.SeriesName = "ATR"}
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetSymbolData("box")
End GetEnd Property
Public ReadOnly Property IndicatorType() As List(Of String)
Get
Return New List(Of String)() From {"Average True Range"}
End GetEnd Property
Sub OnIndicatorsLoaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
cbIndicatorType.SelectedIndex = 0
Me.cbPeriod.Value = atr.Period
End Sub
Sub OnIndicatorTypeSelectionChanged(sender As Object, e As SelectionChangedEventArgs)
Dim ser As FinancialSeries = NothingIf cbIndicatorType.SelectedIndex = 0 Then
ser = atr
If ser IsNot Nothing AndAlso Not indicatorChart.Series.Contains(ser) Then

25

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
indicatorChart.BeginUpdate()
indicatorChart.Series.Clear()indicatorChart.Series.Add(ser)indicatorChart.EndUpdate()
End IfEnd Sub
Sub OnCbPeriodValueChanged(sender As Object, e As PropertyChangedEventArgs(Of Double))
atr.Period = 14
End Sub
Sub OnFinancialChartRendered(sender As Object, e As RenderEventArgs)
If indicatorChart IsNot Nothing Then
indicatorChart.AxisX.Min = (CType(financialChart.AxisX, IAxis)).GetMin()
indicatorChart.AxisX.Max = (CType(financialChart.AxisX, IAxis)).GetMax()End IfEnd Sub
End ClassC#public partial class Indicators : Page{
DataService dataService = DataService.GetService();
ATR atr = new ATR() { SeriesName = "ATR" };public Indicators(){
InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetSymbolData("box");}}public List<string> IndicatorType{get{return new List<string>(){"Average True Range",};}}
void OnIndicatorTypeSelectionChanged(object sender, SelectionChangedEventArgs e){
FinancialSeries ser = null;
if (cbIndicatorType.SelectedIndex == 0)
ser = atr;
if (ser != null && !indicatorChart.Series.Contains(ser)){indicatorChart.BeginUpdate();indicatorChart.Series.Clear();indicatorChart.Series.Add(ser);indicatorChart.EndUpdate();}}void OnCbPeriodValueChanged(object sender, PropertyChangedEventArgs<double> e){
atr.Period = 14;

26

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP}void OnFinancialChartRendered(object sender, RenderEventArgs e){
if (indicatorChart != null){indicatorChart.AxisX.Min = ((IAxis)financialChart.AxisX).GetMin();indicatorChart.AxisX.Max = ((IAxis)financialChart.AxisX).GetMax();
}
}
}

RSI
FinancialChart の RSI（相対力指数）インジケータは、株価の動きの速さと大きさを測定するモメンタムオシレータです。資産の終値の上向きの動きを取引期間中の下向きの動きと比較して、株の強さまたは弱さを判断します。値は 0 ～ 100 の間で変動します。プラスの変化が強い株の方が、マイナスの変化が強い株より RSI が高くなります。
最新の評価益の大きさを最新の評価損と比較する際に RSI を応用することで、資産の買われ過ぎ/売られ過ぎの状況を判断できます。株は、RSI が 70 を超えると買われ過ぎ、30 を下回ると売られ過ぎと見なされます。
また、FinancialChart では、実行時に GetValues() メソッドを使用して、計算された RSI 値を取得できます。これにより、アプリケー
ションでアラートを作成したり、動的データを使用する際にログを取ることができます。
コードスニペットは、クラス DataService を使用します。コードを確認するには、ATR を参照してください。

Visual Basic
Partial Public Class Indicators
Inherits Page
Private dataService As DataService = dataService.GetService()
Private rsi As New RSI() With {.SeriesName = "RSI"}
Public Sub New()
InitializeComponent()
End Sub

27

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetSymbolData("box")
End GetEnd Property
Public ReadOnly Property IndicatorType() As List(Of String)
Get
Return New List(Of String)() From {"Relative Strength Index",}
End GetEnd Property
Sub OnIndicatorTypeSelectionChanged(sender As Object, e As SelectionChangedEventArgs)
Dim ser As FinancialSeries = NothingIf cbIndicatorType.SelectedIndex = 1 Then
ser = rsi
End IfIf ser IsNot Nothing AndAlso Not indicatorChart.Series.Contains(ser) Then
indicatorChart.BeginUpdate()
indicatorChart.Series.Clear()indicatorChart.Series.Add(ser)indicatorChart.EndUpdate()
End IfEnd Sub
Sub OnCbPeriodValueChanged(sender As Object, e As PropertyChangedEventArgs(Of Double))rsi.Period = 14
End Sub
Sub OnFinancialChartRendered(sender As Object, e As RenderEventArgs)
If indicatorChart IsNot Nothing Then
indicatorChart.AxisX.Min = (CType(financialChart.AxisX, IAxis)).GetMin()
indicatorChart.AxisX.Max = (CType(financialChart.AxisX, IAxis)).GetMax()End IfEnd Sub
End ClassC#public partial class Indicators : Page{
DataService dataService = DataService.GetService();
RSI rsi = new RSI() { SeriesName = "RSI" };public Indicators(){
InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetSymbolData("box");}}public List<string> IndicatorType
{
get
{

28

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
return new List<string>(){"Relative Strength Index",};}}
void OnIndicatorTypeSelectionChanged(object sender, SelectionChangedEventArgs e){
FinancialSeries ser = null;
if (cbIndicatorType.SelectedIndex == 0)
ser = rsi;
if (ser != null && !indicatorChart.Series.Contains(ser)){indicatorChart.BeginUpdate();indicatorChart.Series.Clear();indicatorChart.Series.Add(ser);indicatorChart.EndUpdate();}}void OnCbPeriodValueChanged(object sender, PropertyChangedEventArgs<double> e){rsi.Period = 14;}
void OnFinancialChartRendered(object sender, RenderEventArgs e){
if (indicatorChart != null){indicatorChart.AxisX.Min = ((IAxis)financialChart.AxisX).GetMin();indicatorChart.AxisX.Max = ((IAxis)financialChart.AxisX).GetMax();
}
}
}

CCI
CCI （商品チャンネル指数） インジケータは、資産の現在の時価レベルを、指定された期間の平均時価と比較して測定するオシ29

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
レータです。新しいトレンドを判断したり、極端な状況について警告するために使用されます。
FinancialChart では、CCI オブジェクトを使用して CCI を使用する必要があります。また、FinancialChart では、実行時に GetValues() メソッドを使用して、計算された CCI 値を取得できます。これにより、アプリケーションでアラートを作成したり、動的データを使用する際にログを取ることができます。
CCI インジケータの使用方法については、次のコードスニペットを参照してください。このコードスニペットは、クラス DataService を使用します。このコードは、ATR で確認できます。

Visual Basic
Partial Public Class Indicators
Inherits Page
Private dataService As DataService = dataService.GetService()
Private cci As New CCI() With {.SeriesName = "CCI"}
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetSymbolData("box")
End GetEnd Property
Public ReadOnly Property IndicatorType() As List(Of String)
Get
Return New List(Of String)() From {"Commodity Channel Index",}
End GetEnd Property

Sub OnIndicatorTypeSelectionChanged(sender As Object, e As SelectionChangedEventArgs)
Dim ser As FinancialSeries = NothingIf cbIndicatorType.SelectedIndex = 2 Then
ser = cci
End IfIf ser IsNot Nothing AndAlso Not indicatorChart.Series.Contains(ser) Then
indicatorChart.BeginUpdate()
indicatorChart.Series.Clear()indicatorChart.Series.Add(ser)indicatorChart.EndUpdate()
End IfEnd Sub
Sub OnCbPeriodValueChanged(sender As Object, e As PropertyChangedEventArgs(Of Double))wi.Period = CType(e.NewValue, Integer)
cci.Period = wi.Period
rsi.Period = cci.Period
atr.Period = rsi.Period
End Sub
Sub OnFinancialChartRendered(sender As Object, e As RenderEventArgs)
If indicatorChart IsNot Nothing Then
indicatorChart.AxisX.Min = (CType(financialChart.AxisX, IAxis)).GetMin()30

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
indicatorChart.AxisX.Max = (CType(financialChart.AxisX, IAxis)).GetMax()End IfEnd Sub
End ClassC#public partial class Indicators : Page{
DataService dataService = DataService.GetService();
CCI cci = new CCI() { SeriesName = "CCI" };public Indicators(){
InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetSymbolData("box");}}public List<string> IndicatorType{get{return new List<string>(){"Commodity Channel Index",};}}
void OnIndicatorTypeSelectionChanged(object sender, SelectionChangedEventArgs e){
FinancialSeries ser = null;
if (cbIndicatorType.SelectedIndex == 0)
ser = cci;
if (ser != null && !indicatorChart.Series.Contains(ser)){indicatorChart.BeginUpdate();indicatorChart.Series.Clear();indicatorChart.Series.Add(ser);indicatorChart.EndUpdate();}}void OnCbPeriodValueChanged(object sender, PropertyChangedEventArgs<double> e){
cci.Period = 14;}
void OnFinancialChartRendered(object sender, RenderEventArgs e){
if (indicatorChart != null){indicatorChart.AxisX.Min = ((IAxis)financialChart.AxisX).GetMin();indicatorChart.AxisX.Max = ((IAxis)financialChart.AxisX).GetMax();
}
}
}

31

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPWilliams %R
FinancialChart のWilliams %R （ウィリアムズ %R）インジケータは、現在の資産価格を過去の一定の期間中の最高値と比較する
モメンタムインジケータです。通常、比較対象の過去の期間は 14 期間です。このインジケータは、0 ～ -100 の間で変動します。これは、短期ストキャスティクスの逆になります。Williams %Rが過去の期間の最高値と比較した株の終値のレベルを表示するのに対して、ストキャスティクスは最安値と比較した株の終値のレベルを表示します。どちらのインジケータも同じ線を示しますが、ス
ケーリングが異なります。Williams %R を買われ過ぎ/売られ過ぎのレベルの判定に応用すると、買いと売りのシグナルを提供した
り、モメンタムを確認することができます。
WilliamsR インジケータを使用するには、WilliamsR クラスのインスタンスを作成する必要があります。また、FinancialChart では、実行時に GetValues() メソッドを使用して、計算された WilliamsR 値を取得できます。これにより、アプリケーションでアラートを作成したり、動的データを使用する際にログを取ることができます。
次のコードスニペットは、Williams％％Rを使用する方法を示しています。 DataServiceのコードについては、RTIを参照してください。

Visual Basic
Partial Public Class Indicators
Inherits Page
Private dataService As DataService = dataService.GetService()
Private wi As New WilliamsR() With {.SeriesName = "Williams %R"}
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetSymbolData("box")
End GetEnd Property
Public ReadOnly Property IndicatorType() As List(Of String)Get

32

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Return New List(Of String)() From {"Williams %R"}
End GetEnd Property
Sub OnIndicatorTypeSelectionChanged(sender As Object, e As SelectionChangedEventArgs)
Dim ser As FinancialSeries = NothingIf cbIndicatorType.SelectedIndex = 3 Then
ser = wiEnd IfIf ser IsNot Nothing AndAlso Not indicatorChart.Series.Contains(ser) Then
indicatorChart.BeginUpdate()
indicatorChart.Series.Clear()indicatorChart.Series.Add(ser)indicatorChart.EndUpdate()
End IfEnd Sub
Sub OnCbPeriodValueChanged(sender As Object, e As PropertyChangedEventArgs(Of Double))wi.Period = 14
End Sub
Sub OnFinancialChartRendered(sender As Object, e As RenderEventArgs)
If indicatorChart IsNot Nothing Then
indicatorChart.AxisX.Min = (CType(financialChart.AxisX, IAxis)).GetMin()
indicatorChart.AxisX.Max = (CType(financialChart.AxisX, IAxis)).GetMax()End IfEnd Sub
End ClassC#public partial class Indicators : Page{
DataService dataService = DataService.GetService();
WilliamsR wr = new WilliamsR() { SeriesName = "Williams % R" };public Indicators(){
InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetSymbolData("box");}}public List<string> IndicatorType{get{return new List<string>(){"Williams %R"
};
}
}

33

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPvoid OnIndicatorTypeSelectionChanged(object sender, SelectionChangedEventArgs e){
FinancialSeries ser = null;
if (cbIndicatorType.SelectedIndex == 0)
ser = wr;
if (ser != null && !indicatorChart.Series.Contains(ser)){indicatorChart.BeginUpdate();indicatorChart.Series.Clear();indicatorChart.Series.Add(ser);indicatorChart.EndUpdate();}}void OnCbPeriodValueChanged(object sender, PropertyChangedEventArgs<double> e){
wr.Period = 14;}
void OnFinancialChartRendered(object sender, RenderEventArgs e){
if (indicatorChart != null){indicatorChart.AxisX.Min = ((IAxis)financialChart.AxisX).GetMin();indicatorChart.AxisX.Max = ((IAxis)financialChart.AxisX).GetMax();}}}

Stochastic
Stochastic（ストキャスティクス）インジケータは、株価のターニングポイントの前兆となるモメンタムインジケータです。金融商品の終値を、一定期間の価格の範囲と比較します。ブルベアセットアップを特定することで将来の反転を予測するために使用できます。
ストキャスティクスインジケータは、K 線と D 線で測定されます。D 線をよく観察することで、FinancialChart から重要なシグナルを発見します。スローストキャスティクスを作成するには、SmoothingPeriod を 3 に設定します。SmoothingPeriod の値を 2 に設定すると、フルストキャスティクスが作成されます。ファストストキャスティクスを作成するには、SmoothingPeriod を整数値 1 に設定します。

34

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPFinancialChart にストキャスティクスインジケータを追加するには、FinancialChart コントロールをアプリケーションに追加し、コントロールに適切なデータソースを連結するか、Quote Collection でコントロールにデータを追加します。FinancialChart にデータを連結または追加するには、ItemsSource オブジェクトを使用します。Stochastic クラスは、KPeriod（整数値を受け取り、指定期間の価格範囲を計算
する）、DPeriod（整数値を受け取り、K 線の移動平均を計算する）、SmoothingPeriod（整数値を受け取り、ファスト/フル/スロースト
キャスティクスを作成する）プロパティを公開します。これらのプロパティの値に基づいて、ストキャスティクスインジケータが計算され、FinancialChart にプロットされます。KLineStyle および DLineStyle プロパティを利用して、系列の外観を変更できます。
また、FinancialChart では、アプリケーションでアラートを作成したり、動的データの使用中にログを取るために、計算された D 値、Dx
値、K 値、Kx 値を実行時に取得できます。

次の例は、上の図で示すように、企業 Box Inc. の一定期間の株価を考察し、ボリュームチャートとは別にストキャスティクスインジケータ
をプロットします。この例では、json ファイルのデータを使用します。この json ファイルにアクセスするために、DataService.cs クラスを作成します。
json ファイルの［ビルドアクション］プロパティが［埋め込まれたリソース］［埋め込まれたリソース］に設定されていることを確認します。
PriceChart.xaml

copyCode<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Stochastic"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Finance="using:C1.Xaml.Chart.Finance"
xmlns:Chart="using:C1.Xaml.Chart"
xmlns:c1="using:C1.Xaml"
x:Class="Stochastic.MainPage"
mc:Ignorable="d"35

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart x:Name="financialChart"
BindingX="Date"
Binding="Close"
ChartType="Line"
ItemsSource="{Binding Data}"
ToolTipContent="{}{seriesName}&#x000A;{Date} {y}"Margin="10,29,10,392"
Rendered="OnFinancialChartRendered"><Finance:FinancialSeries Binding="High,Low,Open,Close" SeriesName="Box Inc." /></Finance:C1FinancialChart>

IndicatorChart.xaml

copyCode<Finance:C1FinancialChart x:Name="indicatorChart"
BindingX="Date"
Binding="High,Low,Close"
LegendPosition="Bottom"
ItemsSource="{Binding Data}"
Background="White"
ToolTipContent="{}{seriesName}&#x000A;Date:{Date}&#x000A;Y: {y:n2}&#x000A;Volume: {Volume:n0}"
Margin="10,379,10,29"><Finance:Stochastic x:Name="stochastic"
SeriesName="%K,%D"
DPeriod="3"
KPeriod="13"
SmoothingPeriod="1"><Finance:Stochastic.DLineStyle><Chart:ChartStyle Stroke="Orange" /></Finance:Stochastic.DLineStyle><Finance:Stochastic.KLineStyle><Chart:ChartStyle Stroke="YellowGreen" /></Finance:Stochastic.KLineStyle></Finance:Stochastic><Finance:C1FinancialChart.AxisX><Chart:Axis LabelAngle="45" MajorUnit="3"/></Finance:C1FinancialChart.AxisX></Finance:C1FinancialChart></Grid></Page>DataService.cs に次の参照を追加します。
System.Collections.Generic
System.Linq
System.Runtime.Serialization.Json
System.Reflection
DataService.vb
Public Class DataService
Public Function GetData() As List(Of Quote)Dim path As String = "StochasticVB.box.json"'StochasticVBをアプリケーション名で置き換えます。

36

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Dim asm As Assembly = Me.[GetType]().GetTypeInfo().Assembly
Dim stream = asm.GetManifestResourceStream(path)
Dim ser = New DataContractJsonSerializer(GetType(Quote()))
Dim data As Quote() = CType(ser.ReadObject(stream), Quote())
Return data.ToList()
End Function
Shared _ds As DataService
Public Shared Function GetService() As DataService
If _ds Is Nothing Then_ds = New DataService()
End IfReturn _ds
End Function
End Class
DataService.cs
public class DataService{
public List<Quote> GetData(){
string path = "Stochastic.Resources.box.json";//Stochasticをアプリケーション名で置き換えます。
var asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);
return data.ToList();}static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
Json Data[{"date":"15/01/23","open":20.2,"high":24.73,"low":20.16,"close":23.23,"volume":42593223},{"date":"15/01/26","open":23.67,"high":24.39,"low":22.5,"close":22.6,"volume":8677164},{"date":"15/01/27","open":22,"high":22.47,"low":21.17,"close":21.3,"volume":3272512},{"date":"15/01/28","open":21.62,"high":21.84,"low":19.6,"close":19.78,"volume":5047364},{"date":"15/01/29","open":19.9,"high":19.95,"low":18.51,"close":18.8,"volume":3419482},{"date":"15/01/30","open":18.47,"high":19.48,"low":18.22,"close":18.81,"volume":2266439},{"date":"15/02/02","open":19.18,"high":19.3,"low":18.01,"close":18.02,"volume":2071168},{"date":"15/02/03","open":18.22,"high":18.64,"low":18.12,"close":18.24,"volume":1587435},{"date":"15/02/04","open":18.2,"high":18.35,"low":17,"close":17.1,"volume":2912224},{"date":"15/02/05","open":17.3,"high":17.31,"low":16.41,"close":16.66,"volume":2682187},{"date":"15/02/06","open":17.39,"high":18.88,"low":17.21,"close":18.12,"volume":3929164},{"date":"15/02/09","open":18.86,"high":19.95,"low":18.45,"close":19.6,"volume":3226650},{"date":"15/02/10","open":20.5,"high":21,"low":19.63,"close":20.99,"volume":2804409},{"date":"15/02/11","open":20.89,"high":21,"low":20.2,"close":20.96,"volume":1698365},{"date":"15/02/12","open":20.66,"high":20.85,"low":19.75,"close":20.17,"volume":1370320},{"date":"15/02/13","open":20.19,"high":20.68,"low":20,"close":20.18,"volume":711951},{"date":"15/02/17","open":19.5,"high":20.1,"low":18.8,"close":19.05,"volume":2093602},{"date":"15/02/18","open":18.31,"high":18.5,"low":17.96,"close":18,"volume":1849490},{"date":"15/02/19","open":18.33,"high":19.25,"low":17.91,"close":18.96,"volume":1311518},{"date":"15/02/20","open":18.68,"high":19.3,"low":18.65,"close":18.85,"volume":1001692},{"date":"15/02/23","open":18.8,"high":18.89,"low":18.11,"close":18.21,"volume":670087},{"date":"15/02/24","open":18.46,"high":19,"low":18.27,"close":18.83,"volume":759263},{"date":"15/02/25","open":18.83,"high":19.48,"low":18.47,"close":18.67,"volume":915580},{"date":"15/02/26","open":18.64,"high":19.2,"low":18.64,"close":18.94,"volume":461283},{"date":"15/02/27","open":18.8,"high":19.12,"low":18.55,"close":18.66,"volume":617199},{"date":"15/03/02","open":18.66,"high":19.09,"low":18.65,"close":18.79,"volume":519605},{"date":"15/03/03","open":18.79,"high":19.21,"low":18.45,"close":18.59,"volume":832415},

37

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/03/04","open":18.64,"high":19.05,"low":18.32,"close":19,"volume":539688},{"date":"15/03/05","open":19.2,"high":19.2,"low":18.8,"close":19.14,"volume":486149},{"date":"15/03/06","open":19.03,"high":19.1,"low":18.7,"close":18.91,"volume":685659},{"date":"15/03/09","open":18.98,"high":20.15,"low":18.96,"close":19.4,"volume":1321363},{"date":"15/03/10","open":19.3,"high":19.8,"low":18.85,"close":19.64,"volume":615743},{"date":"15/03/11","open":20.08,"high":20.65,"low":19.24,"close":20.53,"volume":2167167},{"date":"15/03/12","open":17.17,"high":18.2,"low":16.76,"close":18.2,"volume":6837638},{"date":"15/03/13","open":18.05,"high":18.05,"low":17.3,"close":17.88,"volume":1715629},{"date":"15/03/16","open":17.91,"high":18,"low":17.01,"close":17.13,"volume":1321313},{"date":"15/03/17","open":17.28,"high":17.37,"low":16.6,"close":17.12,"volume":1272242},{"date":"15/03/18","open":17.1,"high":17.27,"low":16.91,"close":17.01,"volume":530063},{"date":"15/03/19","open":17,"high":17.28,"low":17,"close":17.06,"volume":536427},{"date":"15/03/20","open":17.13,"high":17.24,"low":16.88,"close":17.21,"volume":1320237},{"date":"15/03/23","open":17.21,"high":17.23,"low":17.01,"close":17.11,"volume":509798},{"date":"15/03/24","open":17.02,"high":17.18,"low":16.82,"close":17,"volume":962149},{"date":"15/03/25","open":16.92,"high":16.99,"low":16.82,"close":16.97,"volume":565673},{"date":"15/03/26","open":16.83,"high":17.56,"low":16.83,"close":17.54,"volume":884523},{"date":"15/03/27","open":17.58,"high":18.3,"low":17.11,"close":18.3,"volume":705626},{"date":"15/03/30","open":18.5,"high":19.4,"low":18.4,"close":19.05,"volume":1151620},{"date":"15/03/31","open":19.08,"high":20.58,"low":18.4,"close":19.75,"volume":2020679},{"date":"15/04/01","open":19.69,"high":19.69,"low":18.55,"close":18.65,"volume":961078},{"date":"15/04/02","open":18.56,"high":18.66,"low":17.85,"close":17.9,"volume":884233},{"date":"15/04/06","open":17.78,"high":17.94,"low":17.51,"close":17.66,"volume":605252},{"date":"15/04/07","open":17.62,"high":17.9,"low":17.53,"close":17.61,"volume":591988},{"date":"15/04/08","open":17.64,"high":17.85,"low":17.32,"close":17.36,"volume":618855},{"date":"15/04/09","open":17.33,"high":17.54,"low":17.1,"close":17.1,"volume":761855},{"date":"15/04/10","open":17.08,"high":17.36,"low":17,"close":17.05,"volume":568373},{"date":"15/04/13","open":17.24,"high":17.26,"low":16.81,"close":17.1,"volume":667142},{"date":"15/04/14","open":17.1,"high":17.89,"low":17.02,"close":17.52,"volume":870138},{"date":"15/04/15","open":17.6,"high":17.99,"low":17.5,"close":17.69,"volume":530456},{"date":"15/04/16","open":17.95,"high":18,"low":17.6,"close":17.82,"volume":548730},{"date":"15/04/17","open":17.75,"high":17.79,"low":17.5,"close":17.79,"volume":446373},{"date":"15/04/20","open":17.63,"high":17.98,"low":17.52,"close":17.93,"volume":487017},{"date":"15/04/21","open":17.96,"high":17.98,"low":17.71,"close":17.92,"volume":320302},{"date":"15/04/22","open":17.88,"high":18.33,"low":17.57,"close":18.29,"volume":644812},{"date":"15/04/23","open":18.29,"high":18.61,"low":18.18,"close":18.28,"volume":563879},{"date":"15/04/24","open":18.5,"high":18.5,"low":17.61,"close":17.75,"volume":650762},{"date":"15/04/27","open":17.97,"high":18.05,"low":17.45,"close":17.57,"volume":437294},{"date":"15/04/28","open":17.65,"high":17.79,"low":17.39,"close":17.5,"volume":224519},{"date":"15/04/29","open":17.68,"high":17.68,"low":17.1,"close":17.21,"volume":495706},{"date":"15/04/30","open":17.22,"high":17.3,"low":17,"close":17.11,"volume":391040},{"date":"15/05/01","open":17.11,"high":17.55,"low":16.85,"close":17.5,"volume":563075},{"date":"15/05/02","open":17.56,"high":17.85,"low":17.3,"close":17.4,"volume":253138},{"date":"15/05/05","open":17.68,"high":17.68,"low":17.09,"close":17.43,"volume":290935},{"date":"15/05/06","open":17.48,"high":17.48,"low":17,"close":17.04,"volume":313662},{"date":"15/05/07","open":17.05,"high":17.19,"low":16.92,"close":17.04,"volume":360284},{"date":"15/05/08","open":17.13,"high":17.21,"low":16.91,"close":17.1,"volume":297653},{"date":"15/05/11","open":17.16,"high":17.44,"low":17.13,"close":17.31,"volume":268504},{"date":"15/05/12","open":17.28,"high":17.44,"low":16.99,"close":17.24,"volume":376961},{"date":"15/05/13","open":17.24,"high":17.3,"low":17.06,"close":17.2,"volume":244617},{"date":"15/05/14","open":17.24,"high":17.25,"low":17.02,"close":17.08,"volume":252526},{"date":"15/05/15","open":17.06,"high":17.16,"low":16.95,"close":16.95,"volume":274783},{"date":"15/05/18","open":16.95,"high":17.01,"low":16.76,"close":16.87,"volume":418513},{"date":"15/05/19","open":16.93,"high":16.94,"low":16.6,"close":16.83,"volume":367660},{"date":"15/05/20","open":16.8,"high":16.9,"low":16.65,"close":16.86,"volume":297914},{"date":"15/05/21","open":16.9,"high":17.08,"low":16.79,"close":16.88,"volume":229346},{"date":"15/05/22","open":16.9,"high":17.05,"low":16.85,"close":17,"volume":253279},{"date":"15/05/26","open":17.03,"high":17.08,"low":16.86,"close":17.01,"volume":212640},{"date":"15/05/27","open":17.01,"high":17.99,"low":16.87,"close":17.75,"volume":857109},{"date":"15/05/28","open":17.77,"high":17.77,"low":17.44,"close":17.62,"volume":338482}]
コードビューで次の参照を追加します。
System.Collections.Generic
System.Windows
System.Runtime.Serialization

38

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPVisual Basic
Public NotInheritable Class MainPage
Inherits Page
Private dataService As DataService = DataService.GetService()
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetData()
End GetEnd Property
Private Sub OnFinancialChartRendered(sender As Object, e As C1.Xaml.Chart.RenderEventArgs)
indicatorChart.AxisX.Min = DirectCast(financialChart.AxisX, IAxis).GetMin()
indicatorChart.AxisX.Max = DirectCast(financialChart.AxisX, IAxis).GetMax()
End Sub
End Class<DataContract>
Public Class Quote<DataMember(Name:="date")>Public Property [Date]() As String
Get
Return m_Date
End GetSet
m_Date = ValueEnd SetEnd Property
Private m_Date As String<DataMember(Name:="high")>
Public Property High() As Double
Get
Return m_High
End GetSet
m_High = ValueEnd SetEnd Property
Private m_High As Double<DataMember(Name:="low")>
Public Property Low() As Double
Get
Return m_Low
End GetSet
m_Low = ValueEnd SetEnd Property
Private m_Low As Double<DataMember(Name:="open")>
Public Property Open() As Double
Get
Return m_Open
End GetSet
m_Open = ValueEnd SetEnd Property
Private m_Open As Double<DataMember(Name:="close")>Public Property Close() As Double

39

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Get
Return m_Close
End GetSet
m_Close = ValueEnd SetEnd Property
Private m_Close As Double<DataMember(Name:="volume")>
Public Property Volume() As Double
Get
Return m_Volume
End GetSet
m_Volume = ValueEnd SetEnd Property
Private m_Volume As Double
End ClassC#public sealed partial class MainPage : Page{
DataService dataService = DataService.GetService();public MainPage(){this.InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetData();}}private void OnFinancialChartRendered(object sender, C1.Xaml.Chart.RenderEventArgs e){
indicatorChart.AxisX.Min = ((IAxis)financialChart.AxisX).GetMin();indicatorChart.AxisX.Max = ((IAxis)financialChart.AxisX).GetMax();}}[DataContract]public class Quote{[DataMember(Name = "date")]public string Date { get; set; }[DataMember(Name = "high")]public double High { get; set; }[DataMember(Name = "low")]
public double Low { get; set; }[DataMember(Name = "open")]public double Open { get; set; }[DataMember(Name = "close")]public double Close { get; set; }[DataMember(Name = "volume")]public double Volume { get; set; }}40

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
先頭に移動

MACD
FinancialChart の MACD（移動平均収束発散法）インジケータは、トレンドフォロー型のモメンタムインジケータです。資産価格の強さ、方向、期間、およびモメンタムの変化を明らかにします。このインジケータを使用すると、短期的な価格モメンタムを効率よく見極めることができます。
MACD モメンタムオシレータは、26 日間の指数移動平均と 12 日間の指数移動平均の関係を表示します。2 つの移動平均が収束、交差、発散するに伴って、 MACD オシレータはゼロラインの上下に変動します。オシレータに重ねて「シグナルライン」がプロットされます。このラインは MACD の 9 日間の指数移動平均を示し、買いシグナルと売りシグナルのトリガとして機能します。MACD がゼロラインより下になると、売りシグナルの発生です。
MACD ヒストグラム
ヒストグラムは、短期 MACD ラインとシグナルラインの差を示すオシレータです。MACD インジケータと同様に、ヒストグラムもゼロラインの上下に変動します。正のヒストグラムは、MACD がシグナルラインより上にあることを示し、MACD がシグナルラインより下になると、負のヒストグラムになります。負の MACD ヒストグラムは売りシグナルです。
FinancialChart に MACD インジケータと MACD ヒストグラムを追加するには、FinancialChart コントロールをアプリケーションに追加
し、コントロールに適切なデータソースを連結するか、Quote Collection でコントロールにデータを追加します。FinancialChart にデー
タを連結または追加するには、ItemsSource オブジェクトを使用します。MacdBase クラスは、FastPeriod、SlowPeriod、およびSmoothingPeriod プロパティを公開します。これらのプロパティの値に基づいて、MACD インジケータとヒストグラムが計算され、FinancialChart にプロットされます。系列の外観は、 MacdLineStyle およびSignalLineStyle プロパティで操作できます。
また、FinancialChart では、アプリケーションでアラートを作成したり、動的データの使用中にログを取るために、計算された Macd
値、Macd x 値、シグナル値
シグナル値、シグナル
シグナル x 値を実行時に取得できます。

次の例は、上の図で示すように、企業 Box Inc. の一定期間の株価を考察し、ボリュームチャートとは別に MACD インジケータとMACD ヒストグラムをプロットします。この例では、json ファイルのデータを使用します。この json ファイルにアクセスするために、
DataService.csクラスを作成します。
json ファイルの［ビルドアクション］プロパティが ［埋め込まれたリソース］［埋め込まれたリソース］に設定されていることを確認します。

41

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPPriceChart.xaml

copyCode<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MACD"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Finance="using:C1.Xaml.Chart.Finance"
xmlns:Chart="using:C1.Xaml.Chart"
xmlns:c1="using:C1.Xaml"
x:Class="MACD.MainPage"
mc:Ignorable="d"DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart x:Name="financialChart"
ItemsSource="{Binding Data}"
BindingX="Date"
ChartType="Line"
ToolTipContent="{}{seriesName}&#x000A;{Date} {y}"Margin="0,45,0,335"
Rendered="OnFinancialChartRendered"><Finance:FinancialSeries Binding="High,Low,Open,Close" SeriesName="Box Inc." /><Finance:C1FinancialChart.AxisX><Chart:Axis LabelAngle="45" MajorUnit="3"/></Finance:C1FinancialChart.AxisX></Finance:C1FinancialChart>
IndicatorChart.xaml

copyCode<Finance:C1FinancialChart x:Name="indicatorChart"
BindingX="Date"
Binding="High,Low,Close"
LegendPosition="Bottom"
ItemsSource="{Binding Data}"
Background="White"
ToolTipContent="{}{seriesName}&#x000A;Date:{Date}&#x000A;Y: {y:n2}&#x000A;Volume: {Volume:n0}"
Margin="0,305,0,69" RenderTransformOrigin="0.494,0.483"><Finance:Macd x:Name="Macd" SeriesName="MACD,Signal"><Finance:Macd.MacdLineStyle><Chart:ChartStyle Stroke="OrangeRed" /></Finance:Macd.MacdLineStyle></Finance:Macd><Finance:MacdHistogram x:Name="MACDHistogram"
SeriesName= "MACD Histogram"
FastPeriod="12"
SlowPeriod="26"
SmoothingPeriod="9" /><Finance:C1FinancialChart.AxisX><Chart:Axis LabelAngle="45" MajorUnit="3"/></Finance:C1FinancialChart.AxisX>

42

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP</Finance:C1FinancialChart>

DataService.cs に次の参照を追加します。
System.Collections.Generic
System.Linq
System.Runtime.Serialization.Json
System.Reflection
DataService.vb
Public Class DataService
Public Function GetData() As List(Of Quote)Dim path As String = "MACDVB.box.json"'MACDVBをアプリケーション名で置き換えます。
Dim asm As Assembly = Me.[GetType]().GetTypeInfo().Assembly
Dim stream = asm.GetManifestResourceStream(path)
Dim ser = New DataContractJsonSerializer(GetType(Quote()))
Dim data As Quote() = CType(ser.ReadObject(stream), Quote())
Return data.ToList()
End Function
Shared _ds As DataService
Public Shared Function GetService() As DataService
If _ds Is Nothing Then_ds = New DataService()
End IfReturn _ds
End Function
End Class
DataService.cs
public class DataService{
public List<Quote> GetData(){
string path = "MACD.Resources.box.json";//MACDをアプリケーション名で置き換えます。
var asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);
return data.ToList();}static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
Json Data[{"date":"15/01/23","open":20.2,"high":24.73,"low":20.16,"close":23.23,"volume":42593223},{"date":"15/01/26","open":23.67,"high":24.39,"low":22.5,"close":22.6,"volume":8677164},{"date":"15/01/27","open":22,"high":22.47,"low":21.17,"close":21.3,"volume":3272512},{"date":"15/01/28","open":21.62,"high":21.84,"low":19.6,"close":19.78,"volume":5047364},{"date":"15/01/29","open":19.9,"high":19.95,"low":18.51,"close":18.8,"volume":3419482},{"date":"15/01/30","open":18.47,"high":19.48,"low":18.22,"close":18.81,"volume":2266439},{"date":"15/02/02","open":19.18,"high":19.3,"low":18.01,"close":18.02,"volume":2071168},{"date":"15/02/03","open":18.22,"high":18.64,"low":18.12,"close":18.24,"volume":1587435},

43

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/02/04","open":18.2,"high":18.35,"low":17,"close":17.1,"volume":2912224},{"date":"15/02/05","open":17.3,"high":17.31,"low":16.41,"close":16.66,"volume":2682187},{"date":"15/02/06","open":17.39,"high":18.88,"low":17.21,"close":18.12,"volume":3929164},{"date":"15/02/09","open":18.86,"high":19.95,"low":18.45,"close":19.6,"volume":3226650},{"date":"15/02/10","open":20.5,"high":21,"low":19.63,"close":20.99,"volume":2804409},{"date":"15/02/11","open":20.89,"high":21,"low":20.2,"close":20.96,"volume":1698365},{"date":"15/02/12","open":20.66,"high":20.85,"low":19.75,"close":20.17,"volume":1370320},{"date":"15/02/13","open":20.19,"high":20.68,"low":20,"close":20.18,"volume":711951},{"date":"15/02/17","open":19.5,"high":20.1,"low":18.8,"close":19.05,"volume":2093602},{"date":"15/02/18","open":18.31,"high":18.5,"low":17.96,"close":18,"volume":1849490},{"date":"15/02/19","open":18.33,"high":19.25,"low":17.91,"close":18.96,"volume":1311518},{"date":"15/02/20","open":18.68,"high":19.3,"low":18.65,"close":18.85,"volume":1001692},{"date":"15/02/23","open":18.8,"high":18.89,"low":18.11,"close":18.21,"volume":670087},{"date":"15/02/24","open":18.46,"high":19,"low":18.27,"close":18.83,"volume":759263},{"date":"15/02/25","open":18.83,"high":19.48,"low":18.47,"close":18.67,"volume":915580},{"date":"15/02/26","open":18.64,"high":19.2,"low":18.64,"close":18.94,"volume":461283},{"date":"15/02/27","open":18.8,"high":19.12,"low":18.55,"close":18.66,"volume":617199},{"date":"15/03/02","open":18.66,"high":19.09,"low":18.65,"close":18.79,"volume":519605},{"date":"15/03/03","open":18.79,"high":19.21,"low":18.45,"close":18.59,"volume":832415},{"date":"15/03/04","open":18.64,"high":19.05,"low":18.32,"close":19,"volume":539688},{"date":"15/03/05","open":19.2,"high":19.2,"low":18.8,"close":19.14,"volume":486149},{"date":"15/03/06","open":19.03,"high":19.1,"low":18.7,"close":18.91,"volume":685659},{"date":"15/03/09","open":18.98,"high":20.15,"low":18.96,"close":19.4,"volume":1321363},{"date":"15/03/10","open":19.3,"high":19.8,"low":18.85,"close":19.64,"volume":615743},{"date":"15/03/11","open":20.08,"high":20.65,"low":19.24,"close":20.53,"volume":2167167},{"date":"15/03/12","open":17.17,"high":18.2,"low":16.76,"close":18.2,"volume":6837638},{"date":"15/03/13","open":18.05,"high":18.05,"low":17.3,"close":17.88,"volume":1715629},{"date":"15/03/16","open":17.91,"high":18,"low":17.01,"close":17.13,"volume":1321313},{"date":"15/03/17","open":17.28,"high":17.37,"low":16.6,"close":17.12,"volume":1272242},{"date":"15/03/18","open":17.1,"high":17.27,"low":16.91,"close":17.01,"volume":530063},{"date":"15/03/19","open":17,"high":17.28,"low":17,"close":17.06,"volume":536427},{"date":"15/03/20","open":17.13,"high":17.24,"low":16.88,"close":17.21,"volume":1320237},{"date":"15/03/23","open":17.21,"high":17.23,"low":17.01,"close":17.11,"volume":509798},{"date":"15/03/24","open":17.02,"high":17.18,"low":16.82,"close":17,"volume":962149},{"date":"15/03/25","open":16.92,"high":16.99,"low":16.82,"close":16.97,"volume":565673},{"date":"15/03/26","open":16.83,"high":17.56,"low":16.83,"close":17.54,"volume":884523},{"date":"15/03/27","open":17.58,"high":18.3,"low":17.11,"close":18.3,"volume":705626},{"date":"15/03/30","open":18.5,"high":19.4,"low":18.4,"close":19.05,"volume":1151620},{"date":"15/03/31","open":19.08,"high":20.58,"low":18.4,"close":19.75,"volume":2020679},{"date":"15/04/01","open":19.69,"high":19.69,"low":18.55,"close":18.65,"volume":961078},{"date":"15/04/02","open":18.56,"high":18.66,"low":17.85,"close":17.9,"volume":884233},{"date":"15/04/06","open":17.78,"high":17.94,"low":17.51,"close":17.66,"volume":605252},{"date":"15/04/07","open":17.62,"high":17.9,"low":17.53,"close":17.61,"volume":591988},{"date":"15/04/08","open":17.64,"high":17.85,"low":17.32,"close":17.36,"volume":618855},{"date":"15/04/09","open":17.33,"high":17.54,"low":17.1,"close":17.1,"volume":761855},{"date":"15/04/10","open":17.08,"high":17.36,"low":17,"close":17.05,"volume":568373},{"date":"15/04/13","open":17.24,"high":17.26,"low":16.81,"close":17.1,"volume":667142},{"date":"15/04/14","open":17.1,"high":17.89,"low":17.02,"close":17.52,"volume":870138},{"date":"15/04/15","open":17.6,"high":17.99,"low":17.5,"close":17.69,"volume":530456},{"date":"15/04/16","open":17.95,"high":18,"low":17.6,"close":17.82,"volume":548730},{"date":"15/04/17","open":17.75,"high":17.79,"low":17.5,"close":17.79,"volume":446373},{"date":"15/04/20","open":17.63,"high":17.98,"low":17.52,"close":17.93,"volume":487017},{"date":"15/04/21","open":17.96,"high":17.98,"low":17.71,"close":17.92,"volume":320302},{"date":"15/04/22","open":17.88,"high":18.33,"low":17.57,"close":18.29,"volume":644812},{"date":"15/04/23","open":18.29,"high":18.61,"low":18.18,"close":18.28,"volume":563879},{"date":"15/04/24","open":18.5,"high":18.5,"low":17.61,"close":17.75,"volume":650762},{"date":"15/04/27","open":17.97,"high":18.05,"low":17.45,"close":17.57,"volume":437294},{"date":"15/04/28","open":17.65,"high":17.79,"low":17.39,"close":17.5,"volume":224519},{"date":"15/04/29","open":17.68,"high":17.68,"low":17.1,"close":17.21,"volume":495706},{"date":"15/04/30","open":17.22,"high":17.3,"low":17,"close":17.11,"volume":391040},{"date":"15/05/01","open":17.11,"high":17.55,"low":16.85,"close":17.5,"volume":563075},{"date":"15/05/02","open":17.56,"high":17.85,"low":17.3,"close":17.4,"volume":253138},{"date":"15/05/05","open":17.68,"high":17.68,"low":17.09,"close":17.43,"volume":290935},{"date":"15/05/06","open":17.48,"high":17.48,"low":17,"close":17.04,"volume":313662},{"date":"15/05/07","open":17.05,"high":17.19,"low":16.92,"close":17.04,"volume":360284},{"date":"15/05/08","open":17.13,"high":17.21,"low":16.91,"close":17.1,"volume":297653},{"date":"15/05/11","open":17.16,"high":17.44,"low":17.13,"close":17.31,"volume":268504},{"date":"15/05/12","open":17.28,"high":17.44,"low":16.99,"close":17.24,"volume":376961},

44

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/05/13","open":17.24,"high":17.3,"low":17.06,"close":17.2,"volume":244617},{"date":"15/05/14","open":17.24,"high":17.25,"low":17.02,"close":17.08,"volume":252526},{"date":"15/05/15","open":17.06,"high":17.16,"low":16.95,"close":16.95,"volume":274783},{"date":"15/05/18","open":16.95,"high":17.01,"low":16.76,"close":16.87,"volume":418513},{"date":"15/05/19","open":16.93,"high":16.94,"low":16.6,"close":16.83,"volume":367660},{"date":"15/05/20","open":16.8,"high":16.9,"low":16.65,"close":16.86,"volume":297914},{"date":"15/05/21","open":16.9,"high":17.08,"low":16.79,"close":16.88,"volume":229346},{"date":"15/05/22","open":16.9,"high":17.05,"low":16.85,"close":17,"volume":253279},{"date":"15/05/26","open":17.03,"high":17.08,"low":16.86,"close":17.01,"volume":212640},{"date":"15/05/27","open":17.01,"high":17.99,"low":16.87,"close":17.75,"volume":857109},{"date":"15/05/28","open":17.77,"high":17.77,"low":17.44,"close":17.62,"volume":338482}]
コードビューで次の参照を追加します。
System.Collections.Generic
System.Windows
System.Runtime.Serialization
Visual Basic
Public NotInheritable Class MainPage
Inherits Page
Private dataService As DataService = DataService.GetService()
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetData()
End GetEnd Property
Private Sub financialChart_Rendered(sender As Object,e As C1.Xaml.Chart.RenderEventArgs) Handles financialChart.Rendered
indicatorChart.AxisX.Min = DirectCast(financialChart.AxisX, IAxis).GetMin()
indicatorChart.AxisX.Max = DirectCast(financialChart.AxisX, IAxis).GetMax()
End Sub
End Class<DataContract>
Public Class Quote<DataMember(Name:="date")>Public Property [Date]() As String
Get
Return m_Date
End GetSet
m_Date = ValueEnd SetEnd Property
Private m_Date As String<DataMember(Name:="high")>
Public Property High() As Double
Get
Return m_High
End GetSet
m_High = ValueEnd SetEnd Property
Private m_High As Double<DataMember(Name:="low")>
Public Property Low() As Double
Get

45

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Return m_Low
End GetSet
m_Low = ValueEnd SetEnd Property
Private m_Low As Double<DataMember(Name:="open")>
Public Property Open() As Double
Get
Return m_Open
End GetSet
m_Open = ValueEnd SetEnd Property
Private m_Open As Double<DataMember(Name:="close")>Public Property Close() As Double
Get
Return m_Close
End GetSet
m_Close = ValueEnd SetEnd Property
Private m_Close As Double<DataMember(Name:="volume")>
Public Property Volume() As Double
Get
Return m_Volume
End GetSet
m_Volume = ValueEnd SetEnd Property
Private m_Volume As Double
End ClassC#public sealed partial class MainPage : Page{
DataService dataService = DataService.GetService();public MainPage(){
InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetData();}}private void OnFinancialChartRendered(object sender, C1.Xaml.Chart.RenderEventArgs e){
indicatorChart.AxisX.Min = ((IAxis)financialChart.AxisX).GetMin();indicatorChart.AxisX.Max = ((IAxis)financialChart.AxisX).GetMax();}}[DataContract]public class Quote{

46

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP[DataMember(Name = "date")]public string Date { get; set; }[DataMember(Name = "high")]public double High { get; set; }[DataMember(Name = "low")]
public double Low { get; set; }[DataMember(Name = "open")]public double Open { get; set; }[DataMember(Name = "close")]public double Close { get; set; }[DataMember(Name = "volume")]public double Volume { get; set; }}先頭に移動

オーバーレイインジケータなどのテクニカルオーバーレイは、金融商品の過去から現在までの株価に数式を適用して計算することによって派生された一連のデータポイントです。これらは、資産の市場動向を予測するために使用されます。インジケータとは異なり、
オーバーレイの Y 軸スケールは同じなので、元の価格データまたはボリュームデータと共にプロットされます。
以下のセクションでは、FinanicalChart がサポートするテクニカルオーバーレイについて説明します。
Bollinger Bands
ボリンジャーバンドオーバーレイについて学習します。
Envelopes
エンベロープオーバーレイについて学習します。
Ichimoku Clouds
Learn about Ichimoku clouds overlay.

Bollinger Bands
Bollinger Bands（ボリンジャーバンド）オーバーレイは、一定期間の株価の動きの上限と下限を示します。これは、標準偏差に基づくボ
ラティリティバンドで、移動平均の上下に置かれます。ボリンジャーバンドは、株価の高い安いを相対的に定義するために役立ちます。
上のバンド近くにプロットされた株価は高いと見なされ、下のバンド近くにプロットされた価格は低いと見なされます。ハンドの幅はボラ
ティリティの程度を示します。ボリンジャーバンドの天上に届く株価は、中間トレンドの上方に伸びすぎであると見なされ、ボリンジャーバ
ンドの底に届く株価は、中間トレンドの下方に伸びすぎであると見なされます。
FinancialChart にボリンジャーバンドオーバーレイを追加するには、FinancialChart コントロールをアプリケーションに追加し、コントロー
ルに適切なデータソースを連結するか、Quote Collection でコントロールにデータを追加します。FinancialChart にデータを連結または追加するには、ItemsSource オブジェクトを使用します。BollingerBands クラスは、上下バンドの標準偏差を指定する
Multiplier プロパティを公開し、IndicatorBase クラスは、Period プロパティを公開します。これはミドルバンドの単純移動平均を計算するための整数値を受け取ります。これらのプロパティの値に基づいて、ボリンジャーバンドオーバーレイが計算され、FinancialChartにプロットされます。
また、FinancialChart では、アプリケーションでアラートを作成したり、動的データの使用中にログを取るために、計算された下限
下限 y
値、中間
中間 y 値、上限
上限 y 値、x 値を実行時に取得できます。

47

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

次の例は、上の図で示すように、企業 Box Inc. の一定期間の株価を考察し、同じ株価チャートにボリンジャーバンドオーバーレイをプ
ロットします。この例では、json ファイルのデータを使用します。この json ファイルにアクセスするために、DataService.cs クラスを作成します。
json ファイルの［ビルドアクション］プロパティが［埋め込まれたリソース］［埋め込まれたリソース］に設定されていることを確認します。
XAML

copyCode<Page xmlns:Finance="using:C1.Xaml.Chart.Finance"
xmlns:Chart="using:C1.Xaml.Chart"
xmlns:c1="using:C1.Xaml"
x:Class="Bollinger.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Bollinger"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart x:Name="financialChart"
ItemsSource="{Binding Data}"
Background="White"
ChartType="Candlestick"BindingX="Date"
ToolTipContent="{}{seriesName}&#x000A;{Date} {y}"Margin="6,37,4,71"><Finance:FinancialSeries Binding="High,Low,Open,Close"
SeriesName="Box Inc." /><Finance:BollingerBands x:Name="bollinger"
Multiplier="2"
Period="20"
Binding="High,Low,Close"
SeriesName="Bollinger Bands"><Finance:BollingerBands.Style><Chart:ChartStyle StrokeThickness="2" /></Finance:BollingerBands.Style></Finance:BollingerBands>

48

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP<Finance:C1FinancialChart.AxisX><Chart:Axis LabelAngle="45" MajorUnit="3"/></Finance:C1FinancialChart.AxisX></Finance:C1FinancialChart></Grid></Page>DataService.cs に次の参照を追加します。
System.Collections.Generic
System.Linq
System.Runtime.Serialization.Json
System.Reflection
DataService.vb
Public Class DataService
Public Function GetData() As List(Of Quote)Dim path As String = "BollingerVB.box.json"'BollingerVBをアプリケーション名で置き換えます。
Dim asm As Assembly = Me.[GetType]().GetTypeInfo().Assembly
Dim stream = asm.GetManifestResourceStream(path)
Dim ser = New DataContractJsonSerializer(GetType(Quote()))
Dim data As Quote() = CType(ser.ReadObject(stream), Quote())
Return data.ToList()
End Function
Shared _ds As DataService
Public Shared Function GetService() As DataService
If _ds Is Nothing Then_ds = New DataService()
End IfReturn _ds
End Function
End Class
DataService.cs
public class DataService{
public List<Quote> GetData(){
string path = "Bollinger.Resources.box.json";//Bollingerをアプリケーション名で置き換えます。
var asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);
return data.ToList();}static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
Json Data[{"date":"15/01/23","open":20.2,"high":24.73,"low":20.16,"close":23.23,"volume":42593223},{"date":"15/01/26","open":23.67,"high":24.39,"low":22.5,"close":22.6,"volume":8677164},{"date":"15/01/27","open":22,"high":22.47,"low":21.17,"close":21.3,"volume":3272512},

49

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/01/28","open":21.62,"high":21.84,"low":19.6,"close":19.78,"volume":5047364},{"date":"15/01/29","open":19.9,"high":19.95,"low":18.51,"close":18.8,"volume":3419482},{"date":"15/01/30","open":18.47,"high":19.48,"low":18.22,"close":18.81,"volume":2266439},{"date":"15/02/02","open":19.18,"high":19.3,"low":18.01,"close":18.02,"volume":2071168},{"date":"15/02/03","open":18.22,"high":18.64,"low":18.12,"close":18.24,"volume":1587435},{"date":"15/02/04","open":18.2,"high":18.35,"low":17,"close":17.1,"volume":2912224},{"date":"15/02/05","open":17.3,"high":17.31,"low":16.41,"close":16.66,"volume":2682187},{"date":"15/02/06","open":17.39,"high":18.88,"low":17.21,"close":18.12,"volume":3929164},{"date":"15/02/09","open":18.86,"high":19.95,"low":18.45,"close":19.6,"volume":3226650},{"date":"15/02/10","open":20.5,"high":21,"low":19.63,"close":20.99,"volume":2804409},{"date":"15/02/11","open":20.89,"high":21,"low":20.2,"close":20.96,"volume":1698365},{"date":"15/02/12","open":20.66,"high":20.85,"low":19.75,"close":20.17,"volume":1370320},{"date":"15/02/13","open":20.19,"high":20.68,"low":20,"close":20.18,"volume":711951},{"date":"15/02/17","open":19.5,"high":20.1,"low":18.8,"close":19.05,"volume":2093602},{"date":"15/02/18","open":18.31,"high":18.5,"low":17.96,"close":18,"volume":1849490},{"date":"15/02/19","open":18.33,"high":19.25,"low":17.91,"close":18.96,"volume":1311518},{"date":"15/02/20","open":18.68,"high":19.3,"low":18.65,"close":18.85,"volume":1001692},{"date":"15/02/23","open":18.8,"high":18.89,"low":18.11,"close":18.21,"volume":670087},{"date":"15/02/24","open":18.46,"high":19,"low":18.27,"close":18.83,"volume":759263},{"date":"15/02/25","open":18.83,"high":19.48,"low":18.47,"close":18.67,"volume":915580},{"date":"15/02/26","open":18.64,"high":19.2,"low":18.64,"close":18.94,"volume":461283},{"date":"15/02/27","open":18.8,"high":19.12,"low":18.55,"close":18.66,"volume":617199},{"date":"15/03/02","open":18.66,"high":19.09,"low":18.65,"close":18.79,"volume":519605},{"date":"15/03/03","open":18.79,"high":19.21,"low":18.45,"close":18.59,"volume":832415},{"date":"15/03/04","open":18.64,"high":19.05,"low":18.32,"close":19,"volume":539688},{"date":"15/03/05","open":19.2,"high":19.2,"low":18.8,"close":19.14,"volume":486149},{"date":"15/03/06","open":19.03,"high":19.1,"low":18.7,"close":18.91,"volume":685659},{"date":"15/03/09","open":18.98,"high":20.15,"low":18.96,"close":19.4,"volume":1321363},{"date":"15/03/10","open":19.3,"high":19.8,"low":18.85,"close":19.64,"volume":615743},{"date":"15/03/11","open":20.08,"high":20.65,"low":19.24,"close":20.53,"volume":2167167},{"date":"15/03/12","open":17.17,"high":18.2,"low":16.76,"close":18.2,"volume":6837638},{"date":"15/03/13","open":18.05,"high":18.05,"low":17.3,"close":17.88,"volume":1715629},{"date":"15/03/16","open":17.91,"high":18,"low":17.01,"close":17.13,"volume":1321313},{"date":"15/03/17","open":17.28,"high":17.37,"low":16.6,"close":17.12,"volume":1272242},{"date":"15/03/18","open":17.1,"high":17.27,"low":16.91,"close":17.01,"volume":530063},{"date":"15/03/19","open":17,"high":17.28,"low":17,"close":17.06,"volume":536427},{"date":"15/03/20","open":17.13,"high":17.24,"low":16.88,"close":17.21,"volume":1320237},{"date":"15/03/23","open":17.21,"high":17.23,"low":17.01,"close":17.11,"volume":509798},{"date":"15/03/24","open":17.02,"high":17.18,"low":16.82,"close":17,"volume":962149},{"date":"15/03/25","open":16.92,"high":16.99,"low":16.82,"close":16.97,"volume":565673},{"date":"15/03/26","open":16.83,"high":17.56,"low":16.83,"close":17.54,"volume":884523},{"date":"15/03/27","open":17.58,"high":18.3,"low":17.11,"close":18.3,"volume":705626},{"date":"15/03/30","open":18.5,"high":19.4,"low":18.4,"close":19.05,"volume":1151620},{"date":"15/03/31","open":19.08,"high":20.58,"low":18.4,"close":19.75,"volume":2020679},{"date":"15/04/01","open":19.69,"high":19.69,"low":18.55,"close":18.65,"volume":961078},{"date":"15/04/02","open":18.56,"high":18.66,"low":17.85,"close":17.9,"volume":884233},{"date":"15/04/06","open":17.78,"high":17.94,"low":17.51,"close":17.66,"volume":605252},{"date":"15/04/07","open":17.62,"high":17.9,"low":17.53,"close":17.61,"volume":591988},{"date":"15/04/08","open":17.64,"high":17.85,"low":17.32,"close":17.36,"volume":618855},{"date":"15/04/09","open":17.33,"high":17.54,"low":17.1,"close":17.1,"volume":761855},{"date":"15/04/10","open":17.08,"high":17.36,"low":17,"close":17.05,"volume":568373},{"date":"15/04/13","open":17.24,"high":17.26,"low":16.81,"close":17.1,"volume":667142},{"date":"15/04/14","open":17.1,"high":17.89,"low":17.02,"close":17.52,"volume":870138},{"date":"15/04/15","open":17.6,"high":17.99,"low":17.5,"close":17.69,"volume":530456},{"date":"15/04/16","open":17.95,"high":18,"low":17.6,"close":17.82,"volume":548730},{"date":"15/04/17","open":17.75,"high":17.79,"low":17.5,"close":17.79,"volume":446373},{"date":"15/04/20","open":17.63,"high":17.98,"low":17.52,"close":17.93,"volume":487017},{"date":"15/04/21","open":17.96,"high":17.98,"low":17.71,"close":17.92,"volume":320302},{"date":"15/04/22","open":17.88,"high":18.33,"low":17.57,"close":18.29,"volume":644812},{"date":"15/04/23","open":18.29,"high":18.61,"low":18.18,"close":18.28,"volume":563879},{"date":"15/04/24","open":18.5,"high":18.5,"low":17.61,"close":17.75,"volume":650762},{"date":"15/04/27","open":17.97,"high":18.05,"low":17.45,"close":17.57,"volume":437294},{"date":"15/04/28","open":17.65,"high":17.79,"low":17.39,"close":17.5,"volume":224519},{"date":"15/04/29","open":17.68,"high":17.68,"low":17.1,"close":17.21,"volume":495706},{"date":"15/04/30","open":17.22,"high":17.3,"low":17,"close":17.11,"volume":391040},{"date":"15/05/01","open":17.11,"high":17.55,"low":16.85,"close":17.5,"volume":563075},{"date":"15/05/02","open":17.56,"high":17.85,"low":17.3,"close":17.4,"volume":253138},{"date":"15/05/05","open":17.68,"high":17.68,"low":17.09,"close":17.43,"volume":290935},

50

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/05/06","open":17.48,"high":17.48,"low":17,"close":17.04,"volume":313662},{"date":"15/05/07","open":17.05,"high":17.19,"low":16.92,"close":17.04,"volume":360284},{"date":"15/05/08","open":17.13,"high":17.21,"low":16.91,"close":17.1,"volume":297653},{"date":"15/05/11","open":17.16,"high":17.44,"low":17.13,"close":17.31,"volume":268504},{"date":"15/05/12","open":17.28,"high":17.44,"low":16.99,"close":17.24,"volume":376961},{"date":"15/05/13","open":17.24,"high":17.3,"low":17.06,"close":17.2,"volume":244617},{"date":"15/05/14","open":17.24,"high":17.25,"low":17.02,"close":17.08,"volume":252526},{"date":"15/05/15","open":17.06,"high":17.16,"low":16.95,"close":16.95,"volume":274783},{"date":"15/05/18","open":16.95,"high":17.01,"low":16.76,"close":16.87,"volume":418513},{"date":"15/05/19","open":16.93,"high":16.94,"low":16.6,"close":16.83,"volume":367660},{"date":"15/05/20","open":16.8,"high":16.9,"low":16.65,"close":16.86,"volume":297914},{"date":"15/05/21","open":16.9,"high":17.08,"low":16.79,"close":16.88,"volume":229346},{"date":"15/05/22","open":16.9,"high":17.05,"low":16.85,"close":17,"volume":253279},{"date":"15/05/26","open":17.03,"high":17.08,"low":16.86,"close":17.01,"volume":212640},{"date":"15/05/27","open":17.01,"high":17.99,"low":16.87,"close":17.75,"volume":857109},{"date":"15/05/28","open":17.77,"high":17.77,"low":17.44,"close":17.62,"volume":338482}]
コードビューで次の参照を追加します。
System.Collections.Generic
System.Windows
System.Runtime.Serialization
Visual Basic
Public NotInheritable Class MainPage
Inherits Page
Private dataService As DataService = DataService.GetService()
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetData()
End GetEnd Property
End Class<DataContract>
Public Class Quote<DataMember(Name:="date")>Public Property [Date]() As String
Get
Return m_Date
End GetSet
m_Date = ValueEnd SetEnd Property
Private m_Date As String<DataMember(Name:="high")>
Public Property High() As Double
Get
Return m_High
End GetSet
m_High = ValueEnd SetEnd Property
Private m_High As Double<DataMember(Name:="low")>
Public Property Low() As Double
Get

51

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Return m_Low
End GetSet
m_Low = ValueEnd SetEnd Property
Private m_Low As Double<DataMember(Name:="open")>
Public Property Open() As Double
Get
Return m_Open
End GetSet
m_Open = ValueEnd SetEnd Property
Private m_Open As Double<DataMember(Name:="close")>Public Property Close() As Double
Get
Return m_Close
End GetSet
m_Close = ValueEnd SetEnd Property
Private m_Close As Double<DataMember(Name:="volume")>
Public Property Volume() As Double
Get
Return m_Volume
End GetSet
m_Volume = ValueEnd SetEnd Property
Private m_Volume As Double
End ClassC#public sealed partial class MainPage : Page{
DataService dataService = DataService.GetService();public MainPage(){this.InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetData();}}}[DataContract]public class Quote{[DataMember(Name = "date")]public string Date { get; set; }[DataMember(Name = "high")]public double High { get; set; }52

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP[DataMember(Name = "low")]
public double Low { get; set; }[DataMember(Name = "open")]public double Open { get; set; }[DataMember(Name = "close")]public double Close { get; set; }[DataMember(Name = "volume")]public double Volume { get; set; }}先頭に移動

Envelopes
Envelopes（エンベロープ）オーバーレイは、FinancialChartの移動平均エンベロープオーバーレイ系列を表します。この移動平均エンベ
ロープは、標準移動平均の上および下に設定されるパーセントベースのエンベロープです。移動平均には、単純移動平均または指数
移動平均を使用できます。強気配トレンドの間は、上部エンベロープを越えたブレークスルーが強さと上昇トレンドの継続を示します。
弱気配トレンドの間は、下部エンベロープを越えたブレークスルーが強さと下降トレンドの継続を示します。
FinancialChart にエンベロープオーバーレイを追加するには、FinancialChart コントロールをアプリケーションに追加し、コントロールに適切なデータソースを連結するか、Quote Collection でコントロールにデータを追加します。FinancialChart にデータを連結または追加するには、ItemsSource オブジェクトを使用します。
Envelopes クラスは、上下エンベロープをレンダリングするためのパーセンテージ値を受け取る Size プロパティと、単純移動平均または指数移動平均を指定する Type プロパティを公開します。IndicatorBase クラスは Period プロパティを提供します。これは、単純または指数移動平均を計算するための基準期間を指定する整数値を受け取ります。これらのプロパティの値に基づいて、エンベロープ
オーバーレイが計算され、FinancialChartにプロットされます。
また、FinancialChart では、アプリケーションでアラートを作成したり、動的データの使用中にログを取るために、計算された下限
下限 y
値、上限
上限 y 値を実行時に取得できます。

次の例は、上の図で示すように、企業 Box Inc. の一定期間の株価を考察し、同じ株価チャートにエンベロープオーバーレイをプロットします。この例では、 json ファイルのデータを使用します。この json ファイルにアクセスするために、DataService.cs クラスを作成します。
json ファイルの［ビルドアクション］プロパティが［埋め込まれたリソース］［埋め込まれたリソース］に設定されていることを確認します。
XAML

copyCode<Page xmlns:Finance="using:C1.Xaml.Chart.Finance"

53

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
xmlns:Chart="using:C1.Xaml.Chart"
xmlns:c1="using:C1.Xaml"
x:Class="Envelope.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Envelope"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart x:Name="financialChart"
ItemsSource="{Binding Data}"
Background="White"
ChartType="Candlestick"BindingX="Date"
ToolTipContent="{}{seriesName}&#x000A;{Date} {y}"Margin="0,37,-1,71"><Finance:FinancialSeries Binding="High,Low,Open,Close"
SeriesName="Box Inc." /><Finance:Envelopes Binding="High,Low,Close"
Period="20"
Size="0.03"
Type="Simple"
SeriesName="Envelopes"><Finance:Envelopes.Style><Chart:ChartStyle Stroke="Green" StrokeThickness="2" /></Finance:Envelopes.Style></Finance:Envelopes><Finance:C1FinancialChart.AxisX><Chart:Axis LabelAngle="45" MajorUnit="3"/></Finance:C1FinancialChart.AxisX></Finance:C1FinancialChart></Grid></Page>DataService.cs に次の参照を追加します。
System.Collections.Generic
System.Linq
System.Runtime.Serialization.Json
System.Reflection
DataService.vb
Public Class DataService
Public Function GetData() As List(Of Quote)Dim path As String = "EnvelopeVB.box.json"'EnvelopeVBをアプリケーション名で置き換えます。
Dim asm As Assembly = Me.[GetType]().GetTypeInfo().Assembly
Dim stream = asm.GetManifestResourceStream(path)
Dim ser = New DataContractJsonSerializer(GetType(Quote()))
Dim data As Quote() = CType(ser.ReadObject(stream), Quote())
Return data.ToList()
End Function
Shared _ds As DataService
Public Shared Function GetService() As DataService

54

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
If _ds Is Nothing Then_ds = New DataService()
End IfReturn _ds
End Function
End Class
DataService.cs
public class DataService{
public List<Quote> GetData(){
string path = "Envelope.Resources.box.json";//Envelopeをアプリケーション名で置き換えます。
var asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);
return data.ToList();}static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
Json Data[{"date":"15/01/23","open":20.2,"high":24.73,"low":20.16,"close":23.23,"volume":42593223},{"date":"15/01/26","open":23.67,"high":24.39,"low":22.5,"close":22.6,"volume":8677164},{"date":"15/01/27","open":22,"high":22.47,"low":21.17,"close":21.3,"volume":3272512},{"date":"15/01/28","open":21.62,"high":21.84,"low":19.6,"close":19.78,"volume":5047364},{"date":"15/01/29","open":19.9,"high":19.95,"low":18.51,"close":18.8,"volume":3419482},{"date":"15/01/30","open":18.47,"high":19.48,"low":18.22,"close":18.81,"volume":2266439},{"date":"15/02/02","open":19.18,"high":19.3,"low":18.01,"close":18.02,"volume":2071168},{"date":"15/02/03","open":18.22,"high":18.64,"low":18.12,"close":18.24,"volume":1587435},{"date":"15/02/04","open":18.2,"high":18.35,"low":17,"close":17.1,"volume":2912224},{"date":"15/02/05","open":17.3,"high":17.31,"low":16.41,"close":16.66,"volume":2682187},{"date":"15/02/06","open":17.39,"high":18.88,"low":17.21,"close":18.12,"volume":3929164},{"date":"15/02/09","open":18.86,"high":19.95,"low":18.45,"close":19.6,"volume":3226650},{"date":"15/02/10","open":20.5,"high":21,"low":19.63,"close":20.99,"volume":2804409},{"date":"15/02/11","open":20.89,"high":21,"low":20.2,"close":20.96,"volume":1698365},{"date":"15/02/12","open":20.66,"high":20.85,"low":19.75,"close":20.17,"volume":1370320},{"date":"15/02/13","open":20.19,"high":20.68,"low":20,"close":20.18,"volume":711951},{"date":"15/02/17","open":19.5,"high":20.1,"low":18.8,"close":19.05,"volume":2093602},{"date":"15/02/18","open":18.31,"high":18.5,"low":17.96,"close":18,"volume":1849490},{"date":"15/02/19","open":18.33,"high":19.25,"low":17.91,"close":18.96,"volume":1311518},{"date":"15/02/20","open":18.68,"high":19.3,"low":18.65,"close":18.85,"volume":1001692},{"date":"15/02/23","open":18.8,"high":18.89,"low":18.11,"close":18.21,"volume":670087},{"date":"15/02/24","open":18.46,"high":19,"low":18.27,"close":18.83,"volume":759263},{"date":"15/02/25","open":18.83,"high":19.48,"low":18.47,"close":18.67,"volume":915580},{"date":"15/02/26","open":18.64,"high":19.2,"low":18.64,"close":18.94,"volume":461283},{"date":"15/02/27","open":18.8,"high":19.12,"low":18.55,"close":18.66,"volume":617199},{"date":"15/03/02","open":18.66,"high":19.09,"low":18.65,"close":18.79,"volume":519605},{"date":"15/03/03","open":18.79,"high":19.21,"low":18.45,"close":18.59,"volume":832415},{"date":"15/03/04","open":18.64,"high":19.05,"low":18.32,"close":19,"volume":539688},{"date":"15/03/05","open":19.2,"high":19.2,"low":18.8,"close":19.14,"volume":486149},{"date":"15/03/06","open":19.03,"high":19.1,"low":18.7,"close":18.91,"volume":685659},{"date":"15/03/09","open":18.98,"high":20.15,"low":18.96,"close":19.4,"volume":1321363},{"date":"15/03/10","open":19.3,"high":19.8,"low":18.85,"close":19.64,"volume":615743},{"date":"15/03/11","open":20.08,"high":20.65,"low":19.24,"close":20.53,"volume":2167167},{"date":"15/03/12","open":17.17,"high":18.2,"low":16.76,"close":18.2,"volume":6837638},{"date":"15/03/13","open":18.05,"high":18.05,"low":17.3,"close":17.88,"volume":1715629},

55

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/03/16","open":17.91,"high":18,"low":17.01,"close":17.13,"volume":1321313},{"date":"15/03/17","open":17.28,"high":17.37,"low":16.6,"close":17.12,"volume":1272242},{"date":"15/03/18","open":17.1,"high":17.27,"low":16.91,"close":17.01,"volume":530063},{"date":"15/03/19","open":17,"high":17.28,"low":17,"close":17.06,"volume":536427},{"date":"15/03/20","open":17.13,"high":17.24,"low":16.88,"close":17.21,"volume":1320237},{"date":"15/03/23","open":17.21,"high":17.23,"low":17.01,"close":17.11,"volume":509798},{"date":"15/03/24","open":17.02,"high":17.18,"low":16.82,"close":17,"volume":962149},{"date":"15/03/25","open":16.92,"high":16.99,"low":16.82,"close":16.97,"volume":565673},{"date":"15/03/26","open":16.83,"high":17.56,"low":16.83,"close":17.54,"volume":884523},{"date":"15/03/27","open":17.58,"high":18.3,"low":17.11,"close":18.3,"volume":705626},{"date":"15/03/30","open":18.5,"high":19.4,"low":18.4,"close":19.05,"volume":1151620},{"date":"15/03/31","open":19.08,"high":20.58,"low":18.4,"close":19.75,"volume":2020679},{"date":"15/04/01","open":19.69,"high":19.69,"low":18.55,"close":18.65,"volume":961078},{"date":"15/04/02","open":18.56,"high":18.66,"low":17.85,"close":17.9,"volume":884233},{"date":"15/04/06","open":17.78,"high":17.94,"low":17.51,"close":17.66,"volume":605252},{"date":"15/04/07","open":17.62,"high":17.9,"low":17.53,"close":17.61,"volume":591988},{"date":"15/04/08","open":17.64,"high":17.85,"low":17.32,"close":17.36,"volume":618855},{"date":"15/04/09","open":17.33,"high":17.54,"low":17.1,"close":17.1,"volume":761855},{"date":"15/04/10","open":17.08,"high":17.36,"low":17,"close":17.05,"volume":568373},{"date":"15/04/13","open":17.24,"high":17.26,"low":16.81,"close":17.1,"volume":667142},{"date":"15/04/14","open":17.1,"high":17.89,"low":17.02,"close":17.52,"volume":870138},{"date":"15/04/15","open":17.6,"high":17.99,"low":17.5,"close":17.69,"volume":530456},{"date":"15/04/16","open":17.95,"high":18,"low":17.6,"close":17.82,"volume":548730},{"date":"15/04/17","open":17.75,"high":17.79,"low":17.5,"close":17.79,"volume":446373},{"date":"15/04/20","open":17.63,"high":17.98,"low":17.52,"close":17.93,"volume":487017},{"date":"15/04/21","open":17.96,"high":17.98,"low":17.71,"close":17.92,"volume":320302},{"date":"15/04/22","open":17.88,"high":18.33,"low":17.57,"close":18.29,"volume":644812},{"date":"15/04/23","open":18.29,"high":18.61,"low":18.18,"close":18.28,"volume":563879},{"date":"15/04/24","open":18.5,"high":18.5,"low":17.61,"close":17.75,"volume":650762},{"date":"15/04/27","open":17.97,"high":18.05,"low":17.45,"close":17.57,"volume":437294},{"date":"15/04/28","open":17.65,"high":17.79,"low":17.39,"close":17.5,"volume":224519},{"date":"15/04/29","open":17.68,"high":17.68,"low":17.1,"close":17.21,"volume":495706},{"date":"15/04/30","open":17.22,"high":17.3,"low":17,"close":17.11,"volume":391040},{"date":"15/05/01","open":17.11,"high":17.55,"low":16.85,"close":17.5,"volume":563075},{"date":"15/05/02","open":17.56,"high":17.85,"low":17.3,"close":17.4,"volume":253138},{"date":"15/05/05","open":17.68,"high":17.68,"low":17.09,"close":17.43,"volume":290935},{"date":"15/05/06","open":17.48,"high":17.48,"low":17,"close":17.04,"volume":313662},{"date":"15/05/07","open":17.05,"high":17.19,"low":16.92,"close":17.04,"volume":360284},{"date":"15/05/08","open":17.13,"high":17.21,"low":16.91,"close":17.1,"volume":297653},{"date":"15/05/11","open":17.16,"high":17.44,"low":17.13,"close":17.31,"volume":268504},{"date":"15/05/12","open":17.28,"high":17.44,"low":16.99,"close":17.24,"volume":376961},{"date":"15/05/13","open":17.24,"high":17.3,"low":17.06,"close":17.2,"volume":244617},{"date":"15/05/14","open":17.24,"high":17.25,"low":17.02,"close":17.08,"volume":252526},{"date":"15/05/15","open":17.06,"high":17.16,"low":16.95,"close":16.95,"volume":274783},{"date":"15/05/18","open":16.95,"high":17.01,"low":16.76,"close":16.87,"volume":418513},{"date":"15/05/19","open":16.93,"high":16.94,"low":16.6,"close":16.83,"volume":367660},{"date":"15/05/20","open":16.8,"high":16.9,"low":16.65,"close":16.86,"volume":297914},{"date":"15/05/21","open":16.9,"high":17.08,"low":16.79,"close":16.88,"volume":229346},{"date":"15/05/22","open":16.9,"high":17.05,"low":16.85,"close":17,"volume":253279},{"date":"15/05/26","open":17.03,"high":17.08,"low":16.86,"close":17.01,"volume":212640},{"date":"15/05/27","open":17.01,"high":17.99,"low":16.87,"close":17.75,"volume":857109},{"date":"15/05/28","open":17.77,"high":17.77,"low":17.44,"close":17.62,"volume":338482}]
コードビューで次の参照を追加します。
System.Collections.Generic
System.Windows
System.Runtime.Serialization
Visual Basic
Public NotInheritable Class MainPage
Inherits Page
Private dataService As DataService = DataService.GetService()
Public Sub New()
InitializeComponent()

56

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPEnd Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetData()
End GetEnd Property
End Class<DataContract>
Public Class Quote<DataMember(Name:="date")>Public Property [Date]() As String
Get
Return m_Date
End GetSet
m_Date = ValueEnd SetEnd Property
Private m_Date As String<DataMember(Name:="high")>
Public Property High() As Double
Get
Return m_High
End GetSet
m_High = ValueEnd SetEnd Property
Private m_High As Double<DataMember(Name:="low")>
Public Property Low() As Double
Get
Return m_Low
End GetSet
m_Low = ValueEnd SetEnd Property
Private m_Low As Double<DataMember(Name:="open")>
Public Property Open() As Double
Get
Return m_Open
End GetSet
m_Open = ValueEnd SetEnd Property
Private m_Open As Double<DataMember(Name:="close")>Public Property Close() As Double
Get
Return m_Close
End GetSet
m_Close = ValueEnd SetEnd Property
Private m_Close As Double<DataMember(Name:="volume")>
Public Property Volume() As Double

57

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Get
Return m_Volume
End GetSet
m_Volume = ValueEnd SetEnd Property
Private m_Volume As Double
End ClassC#public sealed partial class MainPage : Page{
DataService dataService = DataService.GetService();public MainPage(){this.InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetData();}}}[DataContract]public class Quote{[DataMember(Name = "date")]public string Date { get; set; }[DataMember(Name = "high")]public double High { get; set; }[DataMember(Name = "low")]
public double Low { get; set; }[DataMember(Name = "open")]public double Open { get; set; }[DataMember(Name = "close")]public double Close { get; set; }[DataMember(Name = "volume")]public double Volume { get; set; }}先頭に移動

Ichimoku Clouds
Ichimoku cloud is an overlay that provides all the information about the price trend at a glance, including its direction, momentum, dynamic
support and resistance levels and even trade signals. It uses moving averages to show bullish and bearish crossover points.The ichimoku cloudconsists of five plots.
1. Conversion Line (9 period high+ 9 period low)/2))
2. Base Line (26 period high + 26 period low)/2))
3. Leading Span A (ConversionLine + Base Line)/2))
4. Leading Span B (52 period high + 52 period low)/2))
5. Lagging Span (Plotted 26 days in past)
Cloud, which is the most important feature of the overlay is formed between Leading Span A and the Leading span B plots and helps in
identifying the trends. The trend is upwards when prices go above the cloud. However, it goes downwards when prices go below the cloud. When58

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPthe Leading span A rises above the Leading Span B, it indicates strengthening of the upward trend. However, the downward trend strengthens
when the Leading span B goes above the Leading Span A.
To use IchimokuCloud overlay in FinancialChart, add a FinancialChart control to your application and bind it to an appropriate data source using
the DataSource property. The IchimokuCloud class allows you to modify the period values for each of the plotting lines, for example, conversion
line has a default period of 9 days, however, you can modify the period value for conversion line using the ConversionPeriod property. Similarly,
you can use BasePeriod, LeadingPeriod, and LaggingPeriod properties to modify the period values for base line, leading span, and lagging
span respectively. Also, it provides styling properties for each of the five plots mentioned above,i.e. ConversionLineStyle, BaseLineStyle, LaggingLineStyle, LeadingSpanALineStyle, and LeadingSpanBLineStyle property. You can also set
the color of bullish and bearish cloud using BullishCloudColor and BearishCloudColor properties respectively.

The following example considers stock data for a company Box Inc. over a period of time and plots ichimoku cloud on the same financial chart, asshown in the image above. The example uses data from a JSON file, and DataService.cs class is created to access the JSON file.
Make sure that Build Action property of the JSON file is set to Embedded Resource.
Make sure to add the following references in DataService.cs:
System.Collections.Generic
System.Linq
System.Runtime.Serialization.Json
System.Reflection
XAML<UserControl x:Class="IchimokuOverlay.Overlays"
x:Class="FinancialChartExplorer.Overlays"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:IchimokuOverlay"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:c1="using:C1.Xaml.Chart.Finance"
xmlns:Chart="using:C1.Xaml.Chart"
xmlns:Xaml="using:C1.Xaml"
DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
mc:Ignorable="d" ><Grid><c1:C1FinancialChart
x:Name="overlayChart"
ItemsSource="{Binding Data}"
Background="White"
ChartType="Candlestick"BindingX="Date"

59

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
ToolTipContent="{}{seriesName}{Date} {y}"><c1:FinancialSeries Binding="High,Low,Open,Close" SeriesName="Box"/><c1:IchimokuCloud x:Name="ichimoku" Binding="High,Low,Close" SeriesName="Ichimoku Cloud"><c1:IchimokuCloud.BearishCloudColor><SolidColorBrush Color="Tomato"/></c1:IchimokuCloud.BearishCloudColor><c1:IchimokuCloud.BullishCloudColor><SolidColorBrush Color="LightGreen"/></c1:IchimokuCloud.BullishCloudColor><c1:IchimokuCloud.ConversionLineStyle><c1:ChartStyle StrokeThickness="0.7" Stroke="Orange"/></c1:IchimokuCloud.ConversionLineStyle><c1:IchimokuCloud.BaseLineStyle><c1:ChartStyle StrokeThickness="0.7" Stroke="Blue"/></c1:IchimokuCloud.BaseLineStyle><c1:IchimokuCloud.LeadingSpanALineStyle><c1:ChartStyle StrokeThickness="0.8" Stroke="LightGreen"/></c1:IchimokuCloud.LeadingSpanALineStyle><c1:IchimokuCloud.LeadingSpanBLineStyle><c1:ChartStyle StrokeThickness="0.8" Stroke="Tomato"/></c1:IchimokuCloud.LeadingSpanBLineStyle><c1:IchimokuCloud.LaggingLineStyle><c1:ChartStyle StrokeThickness="0.7" Stroke="Black"/></c1:IchimokuCloud.LaggingLineStyle></c1:IchimokuCloud><c1:C1FinancialChart.AxisX><c1:Axis LabelAngle="45" MajorUnit="3"/></c1:C1FinancialChart.AxisX></c1:C1FinancialChart></Grid></UserControl>
DataService.cs
public class DataService{
public List<Quote> GetSymbolData(string symbol, int nitems = 0){
string path = string.Format("IchimokuOverlay.Resources.{0}.json", symbol);var stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(path);var ser = new System.Runtime.Serialization.Json.DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);
return data.ToList();}static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
public class Quote{
public string date { get; set; }public double high { get; set; }public double low { get; set; }public double open { get; set; }public double close { get; set; }public double volume { get; set; }public DateTime Date

60

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{
get { return DateTime.ParseExact(date.ToString(), "MM/dd/yy",
System.Globalization.CultureInfo.InvariantCulture); }}}public class Company{
public string Symbol {get; set;}public string Name {get; set;}}
JSON Data[{ "date": "01/23/15", "open": 20.2, "high": 24.73, "low": 20.16, "close": 23.23, "volume": 42593223 },{ "date": "01/26/15", "open": 23.67, "high": 24.39, "low": 22.5, "close": 22.6, "volume": 8677164 },{ "date": "01/27/15", "open": 22, "high": 22.47, "low": 21.17, "close": 21.3, "volume": 3272512 },{ "date": "01/28/15", "open": 21.62, "high": 21.84, "low": 19.6, "close": 19.78, "volume": 5047364 },{ "date": "01/29/15", "open": 19.9, "high": 19.95, "low": 18.51, "close": 18.8, "volume": 3419482 },{ "date": "01/30/15", "open": 18.47, "high": 19.48, "low": 18.22, "close": 18.81, "volume": 2266439 },{ "date": "02/02/15", "open": 19.18, "high": 19.3, "low": 18.01, "close": 18.02, "volume": 2071168 },{ "date": "02/03/15", "open": 18.22, "high": 18.64, "low": 18.12, "close": 18.24, "volume": 1587435 },{ "date": "02/04/15", "open": 18.2, "high": 18.35, "low": 17, "close": 17.1, "volume": 2912224 },{ "date": "02/05/15", "open": 17.3, "high": 17.31, "low": 16.41, "close": 16.66, "volume": 2682187 },{ "date": "02/06/15", "open": 17.39, "high": 18.88, "low": 17.21, "close": 18.12, "volume": 3929164 },{ "date": "02/09/15", "open": 18.86, "high": 19.95, "low": 18.45, "close": 19.6, "volume": 3226650 },{ "date": "02/10/15", "open": 20.5, "high": 21, "low": 19.63, "close": 20.99, "volume": 2804409 },{ "date": "02/11/15", "open": 20.89, "high": 21, "low": 20.2, "close": 20.96, "volume": 1698365 },{ "date": "02/12/15", "open": 20.66, "high": 20.85, "low": 19.75, "close": 20.17, "volume": 1370320 },{ "date": "02/13/15", "open": 20.19, "high": 20.68, "low": 20, "close": 20.18, "volume": 711951 },{ "date": "02/17/15", "open": 19.5, "high": 20.1, "low": 18.8, "close": 19.05, "volume": 2093602 },{ "date": "02/18/15", "open": 18.31, "high": 18.5, "low": 17.96, "close": 18, "volume": 1849490 },{ "date": "02/19/15", "open": 18.33, "high": 19.25, "low": 17.91, "close": 18.96, "volume": 1311518 },{ "date": "02/20/15", "open": 18.68, "high": 19.3, "low": 18.65, "close": 18.85, "volume": 1001692 },{ "date": "02/23/15", "open": 18.8, "high": 18.89, "low": 18.11, "close": 18.21, "volume": 670087 },{ "date": "02/24/15", "open": 18.46, "high": 19, "low": 18.27, "close": 18.83, "volume": 759263 },{ "date": "02/25/15", "open": 18.83, "high": 19.48, "low": 18.47, "close": 18.67, "volume": 915580 },{ "date": "02/26/15", "open": 18.64, "high": 19.2, "low": 18.64, "close": 18.94, "volume": 461283 },{ "date": "02/27/15", "open": 18.8, "high": 19.12, "low": 18.55, "close": 18.66, "volume": 617199 },{ "date": "03/02/15", "open": 18.66, "high": 19.09, "low": 18.65, "close": 18.79, "volume": 519605 },{ "date": "03/03/15", "open": 18.79, "high": 19.21, "low": 18.45, "close": 18.59, "volume": 832415 },{ "date": "03/04/15", "open": 18.64, "high": 19.05, "low": 18.32, "close": 19, "volume": 539688 },{ "date": "03/05/15", "open": 19.2, "high": 19.2, "low": 18.8, "close": 19.14, "volume": 486149 },{ "date": "03/06/15", "open": 19.03, "high": 19.1, "low": 18.7, "close": 18.91, "volume": 685659 },{ "date": "03/09/15", "open": 18.98, "high": 20.15, "low": 18.96, "close": 19.4, "volume": 1321363 },{ "date": "03/10/15", "open": 19.3, "high": 19.8, "low": 18.85, "close": 19.64, "volume": 615743 },{ "date": "03/11/15", "open": 20.08, "high": 20.65, "low": 19.24, "close": 20.53, "volume": 2167167 },{ "date": "03/12/15", "open": 17.17, "high": 18.2, "low": 16.76, "close": 18.2, "volume": 6837638 },{ "date": "03/13/15", "open": 18.05, "high": 18.05, "low": 17.3, "close": 17.88, "volume": 1715629 },{ "date": "03/16/15", "open": 17.91, "high": 18, "low": 17.01, "close": 17.13, "volume": 1321313 },{ "date": "03/17/15", "open": 17.28, "high": 17.37, "low": 16.6, "close": 17.12, "volume": 1272242 },{ "date": "03/18/15", "open": 17.1, "high": 17.27, "low": 16.91, "close": 17.01, "volume": 530063 },{ "date": "03/19/15", "open": 17, "high": 17.28, "low": 17, "close": 17.06, "volume": 536427 },{ "date": "03/20/15", "open": 17.13, "high": 17.24, "low": 16.88, "close": 17.21, "volume": 1320237 },{ "date": "03/23/15", "open": 17.21, "high": 17.23, "low": 17.01, "close": 17.11, "volume": 509798 },{ "date": "03/24/15", "open": 17.02, "high": 17.18, "low": 16.82, "close": 17, "volume": 962149 },{ "date": "03/25/15", "open": 16.92, "high": 16.99, "low": 16.82, "close": 16.97, "volume": 565673 },{ "date": "03/26/15", "open": 16.83, "high": 17.56, "low": 16.83, "close": 17.54, "volume": 884523 },{ "date": "03/27/15", "open": 17.58, "high": 18.3, "low": 17.11, "close": 18.3, "volume": 705626 },{ "date": "03/30/15", "open": 18.5, "high": 19.4, "low": 18.4, "close": 19.05, "volume": 1151620 },{ "date": "03/31/15", "open": 19.08, "high": 20.58, "low": 18.4, "close": 19.75, "volume": 2020679 },{ "date": "04/01/15", "open": 19.69, "high": 19.69, "low": 18.55, "close": 18.65, "volume": 961078 },{ "date": "04/02/15", "open": 18.56, "high": 18.66, "low": 17.85, "close": 17.9, "volume": 884233 },{ "date": "04/06/15", "open": 17.78, "high": 17.94, "low": 17.51, "close": 17.66, "volume": 605252 },{ "date": "04/07/15", "open": 17.62, "high": 17.9, "low": 17.53, "close": 17.61, "volume": 591988 },{ "date": "04/08/15", "open": 17.64, "high": 17.85, "low": 17.32, "close": 17.36, "volume": 618855 },{ "date": "04/09/15", "open": 17.33, "high": 17.54, "low": 17.1, "close": 17.1, "volume": 761855 },{ "date": "04/10/15", "open": 17.08, "high": 17.36, "low": 17, "close": 17.05, "volume": 568373 },{ "date": "04/13/15", "open": 17.24, "high": 17.26, "low": 16.81, "close": 17.1, "volume": 667142 },{ "date": "04/14/15", "open": 17.1, "high": 17.89, "low": 17.02, "close": 17.52, "volume": 870138 },{ "date": "04/15/15", "open": 17.6, "high": 17.99, "low": 17.5, "close": 17.69, "volume": 530456 },{ "date": "04/16/15", "open": 17.95, "high": 18, "low": 17.6, "close": 17.82, "volume": 548730 },{ "date": "04/17/15", "open": 17.75, "high": 17.79, "low": 17.5, "close": 17.79, "volume": 446373 },{ "date": "04/20/15", "open": 17.63, "high": 17.98, "low": 17.52, "close": 17.93, "volume": 487017 },61

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{ "date": "04/21/15", "open": 17.96, "high": 17.98, "low": 17.71, "close": 17.92, "volume": 320302 },{ "date": "04/22/15", "open": 17.88, "high": 18.33, "low": 17.57, "close": 18.29, "volume": 644812 },{ "date": "04/23/15", "open": 18.29, "high": 18.61, "low": 18.18, "close": 18.28, "volume": 563879 },{ "date": "04/24/15", "open": 18.5, "high": 18.5, "low": 17.61, "close": 17.75, "volume": 650762 },{ "date": "04/27/15", "open": 17.97, "high": 18.05, "low": 17.45, "close": 17.57, "volume": 437294 },{ "date": "04/28/15", "open": 17.65, "high": 17.79, "low": 17.39, "close": 17.5, "volume": 224519 },{ "date": "04/29/15", "open": 17.68, "high": 17.68, "low": 17.1, "close": 17.21, "volume": 495706 },{ "date": "04/30/15", "open": 17.22, "high": 17.3, "low": 17, "close": 17.11, "volume": 391040 },{ "date": "05/01/15", "open": 17.11, "high": 17.55, "low": 16.85, "close": 17.5, "volume": 563075 },{ "date": "05/04/15", "open": 17.56, "high": 17.85, "low": 17.3, "close": 17.4, "volume": 253138 },{ "date": "05/05/15", "open": 17.68, "high": 17.68, "low": 17.09, "close": 17.43, "volume": 290935 },{ "date": "05/06/15", "open": 17.48, "high": 17.48, "low": 17, "close": 17.04, "volume": 313662 },{ "date": "05/07/15", "open": 17.05, "high": 17.19, "low": 16.92, "close": 17.04, "volume": 360284 },{ "date": "05/08/15", "open": 17.13, "high": 17.21, "low": 16.91, "close": 17.1, "volume": 297653 },{ "date": "05/11/15", "open": 17.16, "high": 17.44, "low": 17.13, "close": 17.31, "volume": 268504 },{ "date": "05/12/15", "open": 17.28, "high": 17.44, "low": 16.99, "close": 17.24, "volume": 376961 },{ "date": "05/13/15", "open": 17.24, "high": 17.3, "low": 17.06, "close": 17.2, "volume": 244617 },{ "date": "05/14/15", "open": 17.24, "high": 17.25, "low": 17.02, "close": 17.08, "volume": 252526 },{ "date": "05/15/15", "open": 17.06, "high": 17.16, "low": 16.95, "close": 16.95, "volume": 274783 },{ "date": "05/18/15", "open": 16.95, "high": 17.01, "low": 16.76, "close": 16.87, "volume": 418513 },{ "date": "05/19/15", "open": 16.93, "high": 16.94, "low": 16.6, "close": 16.83, "volume": 367660 },{ "date": "05/20/15", "open": 16.8, "high": 16.9, "low": 16.65, "close": 16.86, "volume": 297914 },{ "date": "05/21/15", "open": 16.9, "high": 17.08, "low": 16.79, "close": 16.88, "volume": 229346 },{ "date": "05/22/15", "open": 16.9, "high": 17.05, "low": 16.85, "close": 17, "volume": 253279 },{ "date": "05/26/15", "open": 17.03, "high": 17.08, "low": 16.86, "close": 17.01, "volume": 212640 },{ "date": "05/27/15", "open": 17.01, "high": 17.99, "low": 16.87, "close": 17.75, "volume": 857109 },{ "date": "05/28/15", "open": 17.77, "high": 17.77, "low": 17.44, "close": 17.62, "volume": 338482 }]MainWindow.xaml.cs
public partial class MainWindow : Window{
DataService dataService = DataService.GetService();public MainWindow(){
InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetSymbolData("box");}}}

フィボナッチツール
フィボナッチツールを使用すると、株価チャートで警告レベルを計算してプロットでき、テクニカル分析に便利です。金融商品ト
レーダーのテクニカル分析で商品の株価とボリュームの変化を予想するために、フィボナッチ数列に含まれる数の間の数学的な関係（比）が使用されます。
以下のセクションでは、FinancialChart で使用できるフィボナッチツールについて説明します。
フィボナッチリトレースメント
FinancialChart でフィボナッチリトレースメントを実装する方法について説明します。
フィボナッチアーク
FinancialChart でフィボナッチアークを実装する方法について説明します。
フィボナッチファン
FinancialChart でフィボナッチファンを実装する方法について説明します。
フィボナッチタイムゾーン
FinancialChart でフィボナッチタイムゾーンを実装する方法について説明します。

フィボナッチリトレースメント
62

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
フィボナッチリトレースメントは、FinancialChart内の何本かの水平線（リトレースメントレベル）で構成されるテクニカル分析ツールです。
これらのレベルは、トレンドが元の方向で継続するまでのサポート（株価が下がらない）またはレジスタンス（株価が上がらない）の幅を明示するために使用されます。これらのフィボナッチレベルは、最初に高低（両極値）間の傾向線を描画し、次のそれらの垂直距離を主要なフィボナッチ比率23.6%、38.2%、50%、61.8%、100% で分割することによって作成されます。重要なフィボナッチリトレースメントレ
ベルは、最大プルバックゾーンの 61.8% で、明確な買いまたは売りシグナルを示します。
FinancialChart でフィボナッチリトレースメントを使用するには、コントロールに適切なデータソースを連結するか、Quote Collection でコントロールにデータを追加します。FinancialChart にデータを連結または追加するには、ItemsSource オブジェクトを使用します。
Fibonacci クラスは、Uptrend および Levels プロパティを公開します。これらのプロパティで設定した値に基づいて、FinancialChartに警告レベルがプロットされます。

次の例は、上の図で示すように、企業 Box Inc. の一定期間の株価を考察し、同じ株価チャートに警告レベル（リトレースメント）をプロットします。この例では、json ファイルのデータを使用します。この json ファイルにアクセスするために、DataService.cs クラスを作成します。
json ファイルの［ビルドアクション］プロパティが［埋め込まれたリソース］［埋め込まれたリソース］に設定されていることを確認します。
XAML

copyCode<Page xmlns:Finance="using:C1.Xaml.Chart.Finance"
xmlns:Chart="using:C1.Xaml.Chart"
xmlns:c1="using:C1.Xaml"
x:Class="FibonacciVB.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FibonacciVB"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart x:Name="financialChart"
ItemsSource="{Binding Data}"
ChartType="Line"

63

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
BindingX="Date"
ToolTipContent="{}{seriesName}&#x000A;{Date} {y}"><Finance:FinancialSeries Binding="High,Low,Open,Close"
ChartType="Line"
SeriesName="Box Inc."/><Finance:Fibonacci Binding="Close"><Finance:Fibonacci.Style><Chart:ChartStyle Fill="Red"Stroke="Red"StrokeThickness="0.5"
FontSize="10"/></Finance:Fibonacci.Style></Finance:Fibonacci><Finance:C1FinancialChart.AxisX><Chart:Axis LabelAngle="45" MajorUnit="3"/></Finance:C1FinancialChart.AxisX></Finance:C1FinancialChart></Grid></Page>DataService.cs に次の参照を追加します。
System.Collections.Generic
System.Linq
System.Runtime.Serialization.Json
System.Reflection
DataService.vb
Public Class DataService
Public Function GetData() As List(Of Quote)Dim path As String = "FibonacciVB.box.json"'FibonacciVBをアプリケーション名で置き換えます。
Dim asm As Assembly = Me.[GetType]().GetTypeInfo().Assembly
Dim stream = asm.GetManifestResourceStream(path)
Dim ser = New DataContractJsonSerializer(GetType(Quote()))
Dim data As Quote() = CType(ser.ReadObject(stream), Quote())
Return data.ToList()
End Function
Shared _ds As DataService
Public Shared Function GetService() As DataService
If _ds Is Nothing Then_ds = New DataService()
End IfReturn _ds
End Function
End Class
DataService.cs
public class DataService{
public List<Quote> GetData(){
string path = "Fibonacci.Resources.box.json";//Fibonacciをアプリケーション名で置き換えます。
var asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);
return data.ToList();64

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP}
static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
Json Data[{"date":"15/01/23","open":20.2,"high":24.73,"low":20.16,"close":23.23,"volume":42593223},{"date":"15/01/26","open":23.67,"high":24.39,"low":22.5,"close":22.6,"volume":8677164},{"date":"15/01/27","open":22,"high":22.47,"low":21.17,"close":21.3,"volume":3272512},{"date":"15/01/28","open":21.62,"high":21.84,"low":19.6,"close":19.78,"volume":5047364},{"date":"15/01/29","open":19.9,"high":19.95,"low":18.51,"close":18.8,"volume":3419482},{"date":"15/01/30","open":18.47,"high":19.48,"low":18.22,"close":18.81,"volume":2266439},{"date":"15/02/02","open":19.18,"high":19.3,"low":18.01,"close":18.02,"volume":2071168},{"date":"15/02/03","open":18.22,"high":18.64,"low":18.12,"close":18.24,"volume":1587435},{"date":"15/02/04","open":18.2,"high":18.35,"low":17,"close":17.1,"volume":2912224},{"date":"15/02/05","open":17.3,"high":17.31,"low":16.41,"close":16.66,"volume":2682187},{"date":"15/02/06","open":17.39,"high":18.88,"low":17.21,"close":18.12,"volume":3929164},{"date":"15/02/09","open":18.86,"high":19.95,"low":18.45,"close":19.6,"volume":3226650},{"date":"15/02/10","open":20.5,"high":21,"low":19.63,"close":20.99,"volume":2804409},{"date":"15/02/11","open":20.89,"high":21,"low":20.2,"close":20.96,"volume":1698365},{"date":"15/02/12","open":20.66,"high":20.85,"low":19.75,"close":20.17,"volume":1370320},{"date":"15/02/13","open":20.19,"high":20.68,"low":20,"close":20.18,"volume":711951},{"date":"15/02/17","open":19.5,"high":20.1,"low":18.8,"close":19.05,"volume":2093602},{"date":"15/02/18","open":18.31,"high":18.5,"low":17.96,"close":18,"volume":1849490},{"date":"15/02/19","open":18.33,"high":19.25,"low":17.91,"close":18.96,"volume":1311518},{"date":"15/02/20","open":18.68,"high":19.3,"low":18.65,"close":18.85,"volume":1001692},{"date":"15/02/23","open":18.8,"high":18.89,"low":18.11,"close":18.21,"volume":670087},{"date":"15/02/24","open":18.46,"high":19,"low":18.27,"close":18.83,"volume":759263},{"date":"15/02/25","open":18.83,"high":19.48,"low":18.47,"close":18.67,"volume":915580},{"date":"15/02/26","open":18.64,"high":19.2,"low":18.64,"close":18.94,"volume":461283},{"date":"15/02/27","open":18.8,"high":19.12,"low":18.55,"close":18.66,"volume":617199},{"date":"15/03/02","open":18.66,"high":19.09,"low":18.65,"close":18.79,"volume":519605},{"date":"15/03/03","open":18.79,"high":19.21,"low":18.45,"close":18.59,"volume":832415},{"date":"15/03/04","open":18.64,"high":19.05,"low":18.32,"close":19,"volume":539688},{"date":"15/03/05","open":19.2,"high":19.2,"low":18.8,"close":19.14,"volume":486149},{"date":"15/03/06","open":19.03,"high":19.1,"low":18.7,"close":18.91,"volume":685659},{"date":"15/03/09","open":18.98,"high":20.15,"low":18.96,"close":19.4,"volume":1321363},{"date":"15/03/10","open":19.3,"high":19.8,"low":18.85,"close":19.64,"volume":615743},{"date":"15/03/11","open":20.08,"high":20.65,"low":19.24,"close":20.53,"volume":2167167},{"date":"15/03/12","open":17.17,"high":18.2,"low":16.76,"close":18.2,"volume":6837638},{"date":"15/03/13","open":18.05,"high":18.05,"low":17.3,"close":17.88,"volume":1715629},{"date":"15/03/16","open":17.91,"high":18,"low":17.01,"close":17.13,"volume":1321313},{"date":"15/03/17","open":17.28,"high":17.37,"low":16.6,"close":17.12,"volume":1272242},{"date":"15/03/18","open":17.1,"high":17.27,"low":16.91,"close":17.01,"volume":530063},{"date":"15/03/19","open":17,"high":17.28,"low":17,"close":17.06,"volume":536427},{"date":"15/03/20","open":17.13,"high":17.24,"low":16.88,"close":17.21,"volume":1320237},{"date":"15/03/23","open":17.21,"high":17.23,"low":17.01,"close":17.11,"volume":509798},{"date":"15/03/24","open":17.02,"high":17.18,"low":16.82,"close":17,"volume":962149},{"date":"15/03/25","open":16.92,"high":16.99,"low":16.82,"close":16.97,"volume":565673},{"date":"15/03/26","open":16.83,"high":17.56,"low":16.83,"close":17.54,"volume":884523},{"date":"15/03/27","open":17.58,"high":18.3,"low":17.11,"close":18.3,"volume":705626},{"date":"15/03/30","open":18.5,"high":19.4,"low":18.4,"close":19.05,"volume":1151620},{"date":"15/03/31","open":19.08,"high":20.58,"low":18.4,"close":19.75,"volume":2020679},{"date":"15/04/01","open":19.69,"high":19.69,"low":18.55,"close":18.65,"volume":961078},{"date":"15/04/02","open":18.56,"high":18.66,"low":17.85,"close":17.9,"volume":884233},{"date":"15/04/06","open":17.78,"high":17.94,"low":17.51,"close":17.66,"volume":605252},{"date":"15/04/07","open":17.62,"high":17.9,"low":17.53,"close":17.61,"volume":591988},{"date":"15/04/08","open":17.64,"high":17.85,"low":17.32,"close":17.36,"volume":618855},{"date":"15/04/09","open":17.33,"high":17.54,"low":17.1,"close":17.1,"volume":761855},{"date":"15/04/10","open":17.08,"high":17.36,"low":17,"close":17.05,"volume":568373},{"date":"15/04/13","open":17.24,"high":17.26,"low":16.81,"close":17.1,"volume":667142},

65

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/04/14","open":17.1,"high":17.89,"low":17.02,"close":17.52,"volume":870138},{"date":"15/04/15","open":17.6,"high":17.99,"low":17.5,"close":17.69,"volume":530456},{"date":"15/04/16","open":17.95,"high":18,"low":17.6,"close":17.82,"volume":548730},{"date":"15/04/17","open":17.75,"high":17.79,"low":17.5,"close":17.79,"volume":446373},{"date":"15/04/20","open":17.63,"high":17.98,"low":17.52,"close":17.93,"volume":487017},{"date":"15/04/21","open":17.96,"high":17.98,"low":17.71,"close":17.92,"volume":320302},{"date":"15/04/22","open":17.88,"high":18.33,"low":17.57,"close":18.29,"volume":644812},{"date":"15/04/23","open":18.29,"high":18.61,"low":18.18,"close":18.28,"volume":563879},{"date":"15/04/24","open":18.5,"high":18.5,"low":17.61,"close":17.75,"volume":650762},{"date":"15/04/27","open":17.97,"high":18.05,"low":17.45,"close":17.57,"volume":437294},{"date":"15/04/28","open":17.65,"high":17.79,"low":17.39,"close":17.5,"volume":224519},{"date":"15/04/29","open":17.68,"high":17.68,"low":17.1,"close":17.21,"volume":495706},{"date":"15/04/30","open":17.22,"high":17.3,"low":17,"close":17.11,"volume":391040},{"date":"15/05/01","open":17.11,"high":17.55,"low":16.85,"close":17.5,"volume":563075},{"date":"15/05/02","open":17.56,"high":17.85,"low":17.3,"close":17.4,"volume":253138},{"date":"15/05/05","open":17.68,"high":17.68,"low":17.09,"close":17.43,"volume":290935},{"date":"15/05/06","open":17.48,"high":17.48,"low":17,"close":17.04,"volume":313662},{"date":"15/05/07","open":17.05,"high":17.19,"low":16.92,"close":17.04,"volume":360284},{"date":"15/05/08","open":17.13,"high":17.21,"low":16.91,"close":17.1,"volume":297653},{"date":"15/05/11","open":17.16,"high":17.44,"low":17.13,"close":17.31,"volume":268504},{"date":"15/05/12","open":17.28,"high":17.44,"low":16.99,"close":17.24,"volume":376961},{"date":"15/05/13","open":17.24,"high":17.3,"low":17.06,"close":17.2,"volume":244617},{"date":"15/05/14","open":17.24,"high":17.25,"low":17.02,"close":17.08,"volume":252526},{"date":"15/05/15","open":17.06,"high":17.16,"low":16.95,"close":16.95,"volume":274783},{"date":"15/05/18","open":16.95,"high":17.01,"low":16.76,"close":16.87,"volume":418513},{"date":"15/05/19","open":16.93,"high":16.94,"low":16.6,"close":16.83,"volume":367660},{"date":"15/05/20","open":16.8,"high":16.9,"low":16.65,"close":16.86,"volume":297914},{"date":"15/05/21","open":16.9,"high":17.08,"low":16.79,"close":16.88,"volume":229346},{"date":"15/05/22","open":16.9,"high":17.05,"low":16.85,"close":17,"volume":253279},{"date":"15/05/26","open":17.03,"high":17.08,"low":16.86,"close":17.01,"volume":212640},{"date":"15/05/27","open":17.01,"high":17.99,"low":16.87,"close":17.75,"volume":857109},{"date":"15/05/28","open":17.77,"high":17.77,"low":17.44,"close":17.62,"volume":338482}]
コードビューで次の参照を追加します。
System.Collections.Generic
System.Windows
System.Runtime.Serialization
Visual Basic
Public NotInheritable Class MainPage
Inherits Page
Private dataService As DataService = DataService.GetService()
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetData()
End GetEnd Property
End Class<DataContract>
Public Class Quote<DataMember(Name:="date")>Public Property [Date]() As String
Get
Return m_Date
End GetSet
m_Date = ValueEnd SetEnd Property

66

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPPrivate m_Date As String<DataMember(Name:="high")>
Public Property High() As Double
Get
Return m_High
End GetSet
m_High = ValueEnd SetEnd Property
Private m_High As Double<DataMember(Name:="low")>
Public Property Low() As Double
Get
Return m_Low
End GetSet
m_Low = ValueEnd SetEnd Property
Private m_Low As Double<DataMember(Name:="open")>
Public Property Open() As Double
Get
Return m_Open
End GetSet
m_Open = ValueEnd SetEnd Property
Private m_Open As Double<DataMember(Name:="close")>Public Property Close() As Double
Get
Return m_Close
End GetSet
m_Close = ValueEnd SetEnd Property
Private m_Close As Double<DataMember(Name:="volume")>
Public Property Volume() As Double
Get
Return m_Volume
End GetSet
m_Volume = ValueEnd SetEnd Property
Private m_Volume As Double
End ClassC#public sealed partial class MainPage : Page{
DataService dataService = DataService.GetService();public MainPage(){this.InitializeComponent();}
public List<Quote> Data

67

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{
get{
return dataService.GetData();}}}[DataContract]public class Quote{[DataMember(Name = "date")]public string Date { get; set; }[DataMember(Name = "high")]public double High { get; set; }[DataMember(Name = "low")]
public double Low { get; set; }[DataMember(Name = "open")]public double Open { get; set; }[DataMember(Name = "close")]public double Close { get; set; }[DataMember(Name = "volume")]public double Volume { get; set; }}先頭に移動

フィボナッチアーク
フィボナッチアークは、FinancialChart 内の傾向線から広がる 3本の曲線とベースラインで構成されるテクニカル分析ツールです。これらのアークを使用して、トレーダーは、下降後のカウンタートレンドバウンドのレジスタンスゾーンまたはリバーサルゾーンを予想します。
短期間の小さな株価変化に対しては、短いベースラインと幅が狭いアークが作成されます。長期間の大きな価格変化に対しては、長い
ベースラインと幅が広いアークが作成されます。
フィボナッチアークを作成するには、指定された期間の高（ピーク）と低（谷）の 2 点間にベースラインを描画します。このベースラインと主要なフィボナッチレベル 38.2%、50%、61.8% で交差するようにアークが描画されます。株価の変動だけが考慮されるフィボナッチリト
レースメントとは異なり、フィボナッチアークでは時間要素も考慮されます。
FinancialChart で、フィボナッチアークを使用するには、コントロールをアプリケーションに追加し、コントロールに適切なデータソースを連結するか、 Quote Collection でコントロールにデータを追加します。FinancialChartにデータを連結または追加するには、
ItemsSource オブジェクトを使用します。
Fibonacci クラスは、Uptrend プロパティを公開します。FibonacciArcs クラスのオブジェクトを作成すると、フィボナッチアークがチャートで有効になります。さらに、 FibonacciArcs クラスは、StartX、EndX、StartY、EndY の各プロパティを公開します。これらのプ
ロパティに基づいて、FinancialChart にカーブがプロットされます。

68

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP

次の例は、上の図で示すように、企業 Box Inc. の一定期間の株価を考察し、同じ株価チャートに曲線をプロットします。この例では、
json ファイルのデータを使用します。この json ファイルにアクセスするために、DataService.cs クラスを作成します。
json ファイルの［ビルドアクション］プロパティが［埋め込まれたリソース］［埋め込まれたリソース］に設定されていることを確認します。
XAML

copyCode<Page xmlns:Finance="using:C1.Xaml.Chart.Finance"
xmlns:Chart="using:C1.Xaml.Chart"
xmlns:c1="using:C1.Xaml"
x:Class="FibonacciVB.Arcs"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FibonacciVB"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart x:Name="financialChart"
ItemsSource="{Binding Data}"
BindingX="Date"
ChartType="Line"
ToolTipContent="{}{seriesName}&#x000A;{Date} {y}"><Finance:FibonacciArcs x:Name="arc"Binding="Close"
StartX="46"
StartY="19.75"
EndX="54"EndY="17.1"><Finance:FibonacciArcs.Style><Chart:ChartStyle Stroke="Green" /></Finance:FibonacciArcs.Style></Finance:FibonacciArcs><Finance:C1FinancialChart.AxisX><Chart:Axis LabelAngle="45" MajorUnit="3"/>69

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP</Finance:C1FinancialChart.AxisX></Finance:C1FinancialChart></Grid></Page>DataService.cs に次の参照を追加します。
System.Collections.Generic
System.Linq
System.Runtime.Serialization.Json
System.Reflection
DataService.vb
Public Class DataService
Public Function GetData() As List(Of Quote)Dim path As String = "FibonacciVB.box.json"'FibonacciVBをアプリケーション名で置き換えます。
Dim asm As Assembly = Me.[GetType]().GetTypeInfo().Assembly
Dim stream = asm.GetManifestResourceStream(path)
Dim ser = New DataContractJsonSerializer(GetType(Quote()))
Dim data As Quote() = CType(ser.ReadObject(stream), Quote())
Return data.ToList()
End Function
Shared _ds As DataService
Public Shared Function GetService() As DataService
If _ds Is Nothing Then_ds = New DataService()
End IfReturn _ds
End Function
End Class
DataService.cs
public class DataService{
public List<Quote> GetData(){
string path = "Fibonacci.Resources.box.json";//Fibonacciをアプリケーション名で置き換えます。
var asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);
return data.ToList();}static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
Json Data[{"date":"15/01/23","open":20.2,"high":24.73,"low":20.16,"close":23.23,"volume":42593223},{"date":"15/01/26","open":23.67,"high":24.39,"low":22.5,"close":22.6,"volume":8677164},{"date":"15/01/27","open":22,"high":22.47,"low":21.17,"close":21.3,"volume":3272512},{"date":"15/01/28","open":21.62,"high":21.84,"low":19.6,"close":19.78,"volume":5047364},{"date":"15/01/29","open":19.9,"high":19.95,"low":18.51,"close":18.8,"volume":3419482},

70

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/01/30","open":18.47,"high":19.48,"low":18.22,"close":18.81,"volume":2266439},{"date":"15/02/02","open":19.18,"high":19.3,"low":18.01,"close":18.02,"volume":2071168},{"date":"15/02/03","open":18.22,"high":18.64,"low":18.12,"close":18.24,"volume":1587435},{"date":"15/02/04","open":18.2,"high":18.35,"low":17,"close":17.1,"volume":2912224},{"date":"15/02/05","open":17.3,"high":17.31,"low":16.41,"close":16.66,"volume":2682187},{"date":"15/02/06","open":17.39,"high":18.88,"low":17.21,"close":18.12,"volume":3929164},{"date":"15/02/09","open":18.86,"high":19.95,"low":18.45,"close":19.6,"volume":3226650},{"date":"15/02/10","open":20.5,"high":21,"low":19.63,"close":20.99,"volume":2804409},{"date":"15/02/11","open":20.89,"high":21,"low":20.2,"close":20.96,"volume":1698365},{"date":"15/02/12","open":20.66,"high":20.85,"low":19.75,"close":20.17,"volume":1370320},{"date":"15/02/13","open":20.19,"high":20.68,"low":20,"close":20.18,"volume":711951},{"date":"15/02/17","open":19.5,"high":20.1,"low":18.8,"close":19.05,"volume":2093602},{"date":"15/02/18","open":18.31,"high":18.5,"low":17.96,"close":18,"volume":1849490},{"date":"15/02/19","open":18.33,"high":19.25,"low":17.91,"close":18.96,"volume":1311518},{"date":"15/02/20","open":18.68,"high":19.3,"low":18.65,"close":18.85,"volume":1001692},{"date":"15/02/23","open":18.8,"high":18.89,"low":18.11,"close":18.21,"volume":670087},{"date":"15/02/24","open":18.46,"high":19,"low":18.27,"close":18.83,"volume":759263},{"date":"15/02/25","open":18.83,"high":19.48,"low":18.47,"close":18.67,"volume":915580},{"date":"15/02/26","open":18.64,"high":19.2,"low":18.64,"close":18.94,"volume":461283},{"date":"15/02/27","open":18.8,"high":19.12,"low":18.55,"close":18.66,"volume":617199},{"date":"15/03/02","open":18.66,"high":19.09,"low":18.65,"close":18.79,"volume":519605},{"date":"15/03/03","open":18.79,"high":19.21,"low":18.45,"close":18.59,"volume":832415},{"date":"15/03/04","open":18.64,"high":19.05,"low":18.32,"close":19,"volume":539688},{"date":"15/03/05","open":19.2,"high":19.2,"low":18.8,"close":19.14,"volume":486149},{"date":"15/03/06","open":19.03,"high":19.1,"low":18.7,"close":18.91,"volume":685659},{"date":"15/03/09","open":18.98,"high":20.15,"low":18.96,"close":19.4,"volume":1321363},{"date":"15/03/10","open":19.3,"high":19.8,"low":18.85,"close":19.64,"volume":615743},{"date":"15/03/11","open":20.08,"high":20.65,"low":19.24,"close":20.53,"volume":2167167},{"date":"15/03/12","open":17.17,"high":18.2,"low":16.76,"close":18.2,"volume":6837638},{"date":"15/03/13","open":18.05,"high":18.05,"low":17.3,"close":17.88,"volume":1715629},{"date":"15/03/16","open":17.91,"high":18,"low":17.01,"close":17.13,"volume":1321313},{"date":"15/03/17","open":17.28,"high":17.37,"low":16.6,"close":17.12,"volume":1272242},{"date":"15/03/18","open":17.1,"high":17.27,"low":16.91,"close":17.01,"volume":530063},{"date":"15/03/19","open":17,"high":17.28,"low":17,"close":17.06,"volume":536427},{"date":"15/03/20","open":17.13,"high":17.24,"low":16.88,"close":17.21,"volume":1320237},{"date":"15/03/23","open":17.21,"high":17.23,"low":17.01,"close":17.11,"volume":509798},{"date":"15/03/24","open":17.02,"high":17.18,"low":16.82,"close":17,"volume":962149},{"date":"15/03/25","open":16.92,"high":16.99,"low":16.82,"close":16.97,"volume":565673},{"date":"15/03/26","open":16.83,"high":17.56,"low":16.83,"close":17.54,"volume":884523},{"date":"15/03/27","open":17.58,"high":18.3,"low":17.11,"close":18.3,"volume":705626},{"date":"15/03/30","open":18.5,"high":19.4,"low":18.4,"close":19.05,"volume":1151620},{"date":"15/03/31","open":19.08,"high":20.58,"low":18.4,"close":19.75,"volume":2020679},{"date":"15/04/01","open":19.69,"high":19.69,"low":18.55,"close":18.65,"volume":961078},{"date":"15/04/02","open":18.56,"high":18.66,"low":17.85,"close":17.9,"volume":884233},{"date":"15/04/06","open":17.78,"high":17.94,"low":17.51,"close":17.66,"volume":605252},{"date":"15/04/07","open":17.62,"high":17.9,"low":17.53,"close":17.61,"volume":591988},{"date":"15/04/08","open":17.64,"high":17.85,"low":17.32,"close":17.36,"volume":618855},{"date":"15/04/09","open":17.33,"high":17.54,"low":17.1,"close":17.1,"volume":761855},{"date":"15/04/10","open":17.08,"high":17.36,"low":17,"close":17.05,"volume":568373},{"date":"15/04/13","open":17.24,"high":17.26,"low":16.81,"close":17.1,"volume":667142},{"date":"15/04/14","open":17.1,"high":17.89,"low":17.02,"close":17.52,"volume":870138},{"date":"15/04/15","open":17.6,"high":17.99,"low":17.5,"close":17.69,"volume":530456},{"date":"15/04/16","open":17.95,"high":18,"low":17.6,"close":17.82,"volume":548730},{"date":"15/04/17","open":17.75,"high":17.79,"low":17.5,"close":17.79,"volume":446373},{"date":"15/04/20","open":17.63,"high":17.98,"low":17.52,"close":17.93,"volume":487017},{"date":"15/04/21","open":17.96,"high":17.98,"low":17.71,"close":17.92,"volume":320302},{"date":"15/04/22","open":17.88,"high":18.33,"low":17.57,"close":18.29,"volume":644812},{"date":"15/04/23","open":18.29,"high":18.61,"low":18.18,"close":18.28,"volume":563879},{"date":"15/04/24","open":18.5,"high":18.5,"low":17.61,"close":17.75,"volume":650762},{"date":"15/04/27","open":17.97,"high":18.05,"low":17.45,"close":17.57,"volume":437294},{"date":"15/04/28","open":17.65,"high":17.79,"low":17.39,"close":17.5,"volume":224519},{"date":"15/04/29","open":17.68,"high":17.68,"low":17.1,"close":17.21,"volume":495706},{"date":"15/04/30","open":17.22,"high":17.3,"low":17,"close":17.11,"volume":391040},{"date":"15/05/01","open":17.11,"high":17.55,"low":16.85,"close":17.5,"volume":563075},{"date":"15/05/02","open":17.56,"high":17.85,"low":17.3,"close":17.4,"volume":253138},{"date":"15/05/05","open":17.68,"high":17.68,"low":17.09,"close":17.43,"volume":290935},{"date":"15/05/06","open":17.48,"high":17.48,"low":17,"close":17.04,"volume":313662},{"date":"15/05/07","open":17.05,"high":17.19,"low":16.92,"close":17.04,"volume":360284},

71

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/05/08","open":17.13,"high":17.21,"low":16.91,"close":17.1,"volume":297653},{"date":"15/05/11","open":17.16,"high":17.44,"low":17.13,"close":17.31,"volume":268504},{"date":"15/05/12","open":17.28,"high":17.44,"low":16.99,"close":17.24,"volume":376961},{"date":"15/05/13","open":17.24,"high":17.3,"low":17.06,"close":17.2,"volume":244617},{"date":"15/05/14","open":17.24,"high":17.25,"low":17.02,"close":17.08,"volume":252526},{"date":"15/05/15","open":17.06,"high":17.16,"low":16.95,"close":16.95,"volume":274783},{"date":"15/05/18","open":16.95,"high":17.01,"low":16.76,"close":16.87,"volume":418513},{"date":"15/05/19","open":16.93,"high":16.94,"low":16.6,"close":16.83,"volume":367660},{"date":"15/05/20","open":16.8,"high":16.9,"low":16.65,"close":16.86,"volume":297914},{"date":"15/05/21","open":16.9,"high":17.08,"low":16.79,"close":16.88,"volume":229346},{"date":"15/05/22","open":16.9,"high":17.05,"low":16.85,"close":17,"volume":253279},{"date":"15/05/26","open":17.03,"high":17.08,"low":16.86,"close":17.01,"volume":212640},{"date":"15/05/27","open":17.01,"high":17.99,"low":16.87,"close":17.75,"volume":857109},{"date":"15/05/28","open":17.77,"high":17.77,"low":17.44,"close":17.62,"volume":338482}]
コードビューで次の参照を追加します。
System.Collections.Generic
System.Windows
System.Runtime.Serialization
Visual Basic
Public NotInheritable Class MainPage
Inherits Page
Private dataService As DataService = DataService.GetService()
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetData()
End GetEnd Property
End Class<DataContract>
Public Class Quote<DataMember(Name:="date")>Public Property [Date]() As String
Get
Return m_Date
End GetSet
m_Date = ValueEnd SetEnd Property
Private m_Date As String<DataMember(Name:="high")>
Public Property High() As Double
Get
Return m_High
End GetSet
m_High = ValueEnd SetEnd Property
Private m_High As Double<DataMember(Name:="low")>
Public Property Low() As Double
Get
Return m_Low
End Get72

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Set
m_Low = ValueEnd SetEnd Property
Private m_Low As Double<DataMember(Name:="open")>
Public Property Open() As Double
Get
Return m_Open
End GetSet
m_Open = ValueEnd SetEnd Property
Private m_Open As Double<DataMember(Name:="close")>Public Property Close() As Double
Get
Return m_Close
End GetSet
m_Close = ValueEnd SetEnd Property
Private m_Close As Double<DataMember(Name:="volume")>
Public Property Volume() As Double
Get
Return m_Volume
End GetSet
m_Volume = ValueEnd SetEnd Property
Private m_Volume As Double
End ClassC#public sealed partial class MainPage : Page{
DataService dataService = DataService.GetService();public MainPage(){this.InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetData();}}}[DataContract]public class Quote{[DataMember(Name = "date")]public string Date { get; set; }[DataMember(Name = "high")]public double High { get; set; }[DataMember(Name = "low")]73

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
public double Low { get; set; }[DataMember(Name = "open")]public double Open { get; set; }[DataMember(Name = "close")]public double Close { get; set; }[DataMember(Name = "volume")]public double Volume { get; set; }}先頭に移動

フィボナッチファン
フィボナッチファンは、フィボナッチリトレースメントポイントに基づく上昇トレンドおよび下降傾向線です。このような技術インジケータは、
トレンドの移動速度の測定や、サポートおよびレジスタンス傾向線の構成にも役立ちます。上昇ファンラインはサポートレベルの予想に使用され、下降ファンラインはレジスタンスレベルの予想に役立ちます。上昇トレンドでは、株価が1 つのフィボナッチファン傾向線より下がると、次のフィボナッチファン傾向線までさらに下がることが予想されます。このような場合、フィボナッチファンラインはサポートとして機能します。一方、株価が 1 つのフィボナッチファン傾向線まで上がると、この傾向線がレジスタンスになると期待されます。
フィボナッチファンを作成するには、最初に指定された期間の高低 2 点間の傾向線を描画し、この 2 点間の垂直距離を主要なフィボ
ナッチ比率 38.2%、50%、61.8% で分割します。これらの各分割点の結果として、この垂直距離内のポイントが取得されます。次に、左端のポイントから、これらのフィボナッチ比率を表す3 点にそれぞれラインを描画して、3 本の「ファン」ラインが作成されます。これらが、フィボナッチリトレースメントポイントに基づく傾向線になります。
FinancialChart でフィボナッチファンを使用するには、コントロールに適切なデータソースを連結するか、Quote Collection でコント
ロールにデータを追加します。FinancialChart にデータを連結または追加するには、ItemsSource オブジェクトを使用します。
Fibonacci クラスは、Uptrend プロパティを公開します。FibonacciFans クラスのオブジェクトを作成すると、フィボナッチファンがチャートで有効になります。さらに、 FibonacciFans クラスは、StartX、EndX、StartY、EndY の各プロパティを公開します。これらのプロパ
ティに基づいて、FinancialChart にフィボナッチファンラインがプロットされます。

次の例は、上の図で示すように、企業 Box Inc. の一定期間の株価を考察し、同じ株価チャートにファンラインをプロットします。この例では、json ファイルのデータを使用します。この json ファイルにアクセスするために、DataService.cs クラスを作成します。
json ファイルの［ビルドアクション］プロパティが［埋め込まれたリソース］［埋め込まれたリソース］に設定されていることを確認します。

74

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
XAML

copyCode<Page xmlns:Finance="using:C1.Xaml.Chart.Finance"
xmlns:Chart="using:C1.Xaml.Chart"
xmlns:c1="using:C1.Xaml"
x:Class="FibonacciVB.Fans"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FibonacciVB"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart x:Name="financialChart"
ItemsSource="{Binding Data}"
BindingX="Date"
ChartType="Line"
ToolTipContent="{}{seriesName}&#x000A;{Date} {y}"><Finance:FinancialSeries Binding="High,Low,Open,Close"
ChartType="Line"
SeriesName="Box Inc."/><Finance:FibonacciFans x:Name="fans"Binding="Close"
StartX="10"
StartY="18.12"
EndX="32"
EndY="20.53"><Finance:FibonacciFans.Style><Chart:ChartStyle Stroke="Pink" /></Finance:FibonacciFans.Style></Finance:FibonacciFans><Finance:C1FinancialChart.AxisX><Chart:Axis LabelAngle="45" MajorUnit="3"/></Finance:C1FinancialChart.AxisX></Finance:C1FinancialChart></Grid></Page>DataService.cs に次の参照を追加します。
System.Collections.Generic
System.Linq
System.Runtime.Serialization.Json
System.Reflection
DataService.vb
Public Class DataService
Public Function GetData() As List(Of Quote)Dim path As String = "FibonacciVB.box.json"'FibonacciVBをアプリケーション名で置き換えます。
Dim asm As Assembly = Me.[GetType]().GetTypeInfo().Assembly
Dim stream = asm.GetManifestResourceStream(path)
Dim ser = New DataContractJsonSerializer(GetType(Quote()))
Dim data As Quote() = CType(ser.ReadObject(stream), Quote())

75

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Return data.ToList()
End Function
Shared _ds As DataService
Public Shared Function GetService() As DataService
If _ds Is Nothing Then_ds = New DataService()
End IfReturn _ds
End Function
End Class
DataService.cs
public class DataService{
public List<Quote> GetData(){
string path = "Fibonacci.Resources.box.json";//Fibonacciをアプリケーション名で置き換えます。
var asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);
return data.ToList();}static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
Json Data[{"date":"15/01/23","open":20.2,"high":24.73,"low":20.16,"close":23.23,"volume":42593223},{"date":"15/01/26","open":23.67,"high":24.39,"low":22.5,"close":22.6,"volume":8677164},{"date":"15/01/27","open":22,"high":22.47,"low":21.17,"close":21.3,"volume":3272512},{"date":"15/01/28","open":21.62,"high":21.84,"low":19.6,"close":19.78,"volume":5047364},{"date":"15/01/29","open":19.9,"high":19.95,"low":18.51,"close":18.8,"volume":3419482},{"date":"15/01/30","open":18.47,"high":19.48,"low":18.22,"close":18.81,"volume":2266439},{"date":"15/02/02","open":19.18,"high":19.3,"low":18.01,"close":18.02,"volume":2071168},{"date":"15/02/03","open":18.22,"high":18.64,"low":18.12,"close":18.24,"volume":1587435},{"date":"15/02/04","open":18.2,"high":18.35,"low":17,"close":17.1,"volume":2912224},{"date":"15/02/05","open":17.3,"high":17.31,"low":16.41,"close":16.66,"volume":2682187},{"date":"15/02/06","open":17.39,"high":18.88,"low":17.21,"close":18.12,"volume":3929164},{"date":"15/02/09","open":18.86,"high":19.95,"low":18.45,"close":19.6,"volume":3226650},{"date":"15/02/10","open":20.5,"high":21,"low":19.63,"close":20.99,"volume":2804409},{"date":"15/02/11","open":20.89,"high":21,"low":20.2,"close":20.96,"volume":1698365},{"date":"15/02/12","open":20.66,"high":20.85,"low":19.75,"close":20.17,"volume":1370320},{"date":"15/02/13","open":20.19,"high":20.68,"low":20,"close":20.18,"volume":711951},{"date":"15/02/17","open":19.5,"high":20.1,"low":18.8,"close":19.05,"volume":2093602},{"date":"15/02/18","open":18.31,"high":18.5,"low":17.96,"close":18,"volume":1849490},{"date":"15/02/19","open":18.33,"high":19.25,"low":17.91,"close":18.96,"volume":1311518},{"date":"15/02/20","open":18.68,"high":19.3,"low":18.65,"close":18.85,"volume":1001692},{"date":"15/02/23","open":18.8,"high":18.89,"low":18.11,"close":18.21,"volume":670087},{"date":"15/02/24","open":18.46,"high":19,"low":18.27,"close":18.83,"volume":759263},{"date":"15/02/25","open":18.83,"high":19.48,"low":18.47,"close":18.67,"volume":915580},{"date":"15/02/26","open":18.64,"high":19.2,"low":18.64,"close":18.94,"volume":461283},{"date":"15/02/27","open":18.8,"high":19.12,"low":18.55,"close":18.66,"volume":617199},{"date":"15/03/02","open":18.66,"high":19.09,"low":18.65,"close":18.79,"volume":519605},{"date":"15/03/03","open":18.79,"high":19.21,"low":18.45,"close":18.59,"volume":832415},{"date":"15/03/04","open":18.64,"high":19.05,"low":18.32,"close":19,"volume":539688},{"date":"15/03/05","open":19.2,"high":19.2,"low":18.8,"close":19.14,"volume":486149},{"date":"15/03/06","open":19.03,"high":19.1,"low":18.7,"close":18.91,"volume":685659},

76

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/03/09","open":18.98,"high":20.15,"low":18.96,"close":19.4,"volume":1321363},{"date":"15/03/10","open":19.3,"high":19.8,"low":18.85,"close":19.64,"volume":615743},{"date":"15/03/11","open":20.08,"high":20.65,"low":19.24,"close":20.53,"volume":2167167},{"date":"15/03/12","open":17.17,"high":18.2,"low":16.76,"close":18.2,"volume":6837638},{"date":"15/03/13","open":18.05,"high":18.05,"low":17.3,"close":17.88,"volume":1715629},{"date":"15/03/16","open":17.91,"high":18,"low":17.01,"close":17.13,"volume":1321313},{"date":"15/03/17","open":17.28,"high":17.37,"low":16.6,"close":17.12,"volume":1272242},{"date":"15/03/18","open":17.1,"high":17.27,"low":16.91,"close":17.01,"volume":530063},{"date":"15/03/19","open":17,"high":17.28,"low":17,"close":17.06,"volume":536427},{"date":"15/03/20","open":17.13,"high":17.24,"low":16.88,"close":17.21,"volume":1320237},{"date":"15/03/23","open":17.21,"high":17.23,"low":17.01,"close":17.11,"volume":509798},{"date":"15/03/24","open":17.02,"high":17.18,"low":16.82,"close":17,"volume":962149},{"date":"15/03/25","open":16.92,"high":16.99,"low":16.82,"close":16.97,"volume":565673},{"date":"15/03/26","open":16.83,"high":17.56,"low":16.83,"close":17.54,"volume":884523},{"date":"15/03/27","open":17.58,"high":18.3,"low":17.11,"close":18.3,"volume":705626},{"date":"15/03/30","open":18.5,"high":19.4,"low":18.4,"close":19.05,"volume":1151620},{"date":"15/03/31","open":19.08,"high":20.58,"low":18.4,"close":19.75,"volume":2020679},{"date":"15/04/01","open":19.69,"high":19.69,"low":18.55,"close":18.65,"volume":961078},{"date":"15/04/02","open":18.56,"high":18.66,"low":17.85,"close":17.9,"volume":884233},{"date":"15/04/06","open":17.78,"high":17.94,"low":17.51,"close":17.66,"volume":605252},{"date":"15/04/07","open":17.62,"high":17.9,"low":17.53,"close":17.61,"volume":591988},{"date":"15/04/08","open":17.64,"high":17.85,"low":17.32,"close":17.36,"volume":618855},{"date":"15/04/09","open":17.33,"high":17.54,"low":17.1,"close":17.1,"volume":761855},{"date":"15/04/10","open":17.08,"high":17.36,"low":17,"close":17.05,"volume":568373},{"date":"15/04/13","open":17.24,"high":17.26,"low":16.81,"close":17.1,"volume":667142},{"date":"15/04/14","open":17.1,"high":17.89,"low":17.02,"close":17.52,"volume":870138},{"date":"15/04/15","open":17.6,"high":17.99,"low":17.5,"close":17.69,"volume":530456},{"date":"15/04/16","open":17.95,"high":18,"low":17.6,"close":17.82,"volume":548730},{"date":"15/04/17","open":17.75,"high":17.79,"low":17.5,"close":17.79,"volume":446373},{"date":"15/04/20","open":17.63,"high":17.98,"low":17.52,"close":17.93,"volume":487017},{"date":"15/04/21","open":17.96,"high":17.98,"low":17.71,"close":17.92,"volume":320302},{"date":"15/04/22","open":17.88,"high":18.33,"low":17.57,"close":18.29,"volume":644812},{"date":"15/04/23","open":18.29,"high":18.61,"low":18.18,"close":18.28,"volume":563879},{"date":"15/04/24","open":18.5,"high":18.5,"low":17.61,"close":17.75,"volume":650762},{"date":"15/04/27","open":17.97,"high":18.05,"low":17.45,"close":17.57,"volume":437294},{"date":"15/04/28","open":17.65,"high":17.79,"low":17.39,"close":17.5,"volume":224519},{"date":"15/04/29","open":17.68,"high":17.68,"low":17.1,"close":17.21,"volume":495706},{"date":"15/04/30","open":17.22,"high":17.3,"low":17,"close":17.11,"volume":391040},{"date":"15/05/01","open":17.11,"high":17.55,"low":16.85,"close":17.5,"volume":563075},{"date":"15/05/02","open":17.56,"high":17.85,"low":17.3,"close":17.4,"volume":253138},{"date":"15/05/05","open":17.68,"high":17.68,"low":17.09,"close":17.43,"volume":290935},{"date":"15/05/06","open":17.48,"high":17.48,"low":17,"close":17.04,"volume":313662},{"date":"15/05/07","open":17.05,"high":17.19,"low":16.92,"close":17.04,"volume":360284},{"date":"15/05/08","open":17.13,"high":17.21,"low":16.91,"close":17.1,"volume":297653},{"date":"15/05/11","open":17.16,"high":17.44,"low":17.13,"close":17.31,"volume":268504},{"date":"15/05/12","open":17.28,"high":17.44,"low":16.99,"close":17.24,"volume":376961},{"date":"15/05/13","open":17.24,"high":17.3,"low":17.06,"close":17.2,"volume":244617},{"date":"15/05/14","open":17.24,"high":17.25,"low":17.02,"close":17.08,"volume":252526},{"date":"15/05/15","open":17.06,"high":17.16,"low":16.95,"close":16.95,"volume":274783},{"date":"15/05/18","open":16.95,"high":17.01,"low":16.76,"close":16.87,"volume":418513},{"date":"15/05/19","open":16.93,"high":16.94,"low":16.6,"close":16.83,"volume":367660},{"date":"15/05/20","open":16.8,"high":16.9,"low":16.65,"close":16.86,"volume":297914},{"date":"15/05/21","open":16.9,"high":17.08,"low":16.79,"close":16.88,"volume":229346},{"date":"15/05/22","open":16.9,"high":17.05,"low":16.85,"close":17,"volume":253279},{"date":"15/05/26","open":17.03,"high":17.08,"low":16.86,"close":17.01,"volume":212640},{"date":"15/05/27","open":17.01,"high":17.99,"low":16.87,"close":17.75,"volume":857109},{"date":"15/05/28","open":17.77,"high":17.77,"low":17.44,"close":17.62,"volume":338482}]
コードビューで次の参照を追加します。
System.Collections.Generic
System.Windows
System.Runtime.Serialization
Visual Basic77

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Public NotInheritable Class MainPage
Inherits Page
Private dataService As DataService = DataService.GetService()
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetData()
End GetEnd Property
End Class<DataContract>
Public Class Quote<DataMember(Name:="date")>Public Property [Date]() As String
Get
Return m_Date
End GetSet
m_Date = ValueEnd SetEnd Property
Private m_Date As String<DataMember(Name:="high")>
Public Property High() As Double
Get
Return m_High
End GetSet
m_High = ValueEnd SetEnd Property
Private m_High As Double<DataMember(Name:="low")>
Public Property Low() As Double
Get
Return m_Low
End GetSet
m_Low = ValueEnd SetEnd Property
Private m_Low As Double<DataMember(Name:="open")>
Public Property Open() As Double
Get
Return m_Open
End GetSet
m_Open = ValueEnd SetEnd Property
Private m_Open As Double<DataMember(Name:="close")>Public Property Close() As Double
Get
Return m_Close
End GetSet
m_Close = ValueEnd Set78

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
End Property
Private m_Close As Double<DataMember(Name:="volume")>
Public Property Volume() As Double
Get
Return m_Volume
End GetSet
m_Volume = ValueEnd SetEnd Property
Private m_Volume As Double
End ClassC#public sealed partial class MainPage : Page{
DataService dataService = DataService.GetService();public MainPage(){this.InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetData();}}}[DataContract]public class Quote{[DataMember(Name = "date")]public string Date { get; set; }[DataMember(Name = "high")]public double High { get; set; }[DataMember(Name = "low")]
public double Low { get; set; }[DataMember(Name = "open")]public double Open { get; set; }[DataMember(Name = "close")]public double Close { get; set; }[DataMember(Name = "volume")]public double Volume { get; set; }}先頭に移動

フィボナッチタイムゾーン
フィボナッチタイムゾーンは、トレーダーが金融商品の価格が重要な動きを示す時期を予想するために使用されるテクニカルインジケー
タです。タイムゾーンは、フィボナッチ数と呼ばれる数列（1、2、3、5、8、13、21、34...）に対応する一連の垂直ラインです。
株価チャートの（大きな価格変動の後の）タイムゾーンの開始位置はトレーダーが決定し、以降のフィボナッチ数列の位置に対応する日にそれぞれ垂直ラインが引かれます。フィボナッチタイムゾーンを使用して、テクニカルトレーダーは、これらの垂直タイムゾーンライン
付近に将来の株価変化を予想し、売買の決定を行います。理想的には、21、34、55、89、144日後に価格のリバーサルポイントの可能性があるため、最初の 7 ～ 8 個のタイムゾーンは無視するように推奨されます。これらのポイントは、それぞれ 8、9、10、11、12 番目

79

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPのタイムゾーンに対応します。
FinancialChart で、フィボナッチタイムゾーンを使用するには、コントロールをアプリケーションに追加し、コントロールに適切なデータ
ソースを連結するか、Quote Collection でコントロールにデータを追加します。FinancialChart にデータを連結または追加するには、
ItemsSource オブジェクトを使用します。
Fibonacci クラスは、Uptrend プロパティを公開します。FibonacciTimeZones クラスのオブジェクトを作成すると、フィボナッチタイム
ゾーンがチャートで有効になります。さらに、 FibonacciExtension クラスは、StartX、EndX の各プロパティを公開します。これらのプ
ロパティに基づいて、FinancialChart にタイムゾーンがプロットされます。

次の例は、上の図で示すように、企業 Box Inc. の一定期間の株価を考察し、同じ株価チャートにタイムゾーンをプロットします。この例
では、json ファイルのデータを使用します。この json ファイルにアクセスするために、DataService.cs クラスを作成します。
json ファイルの［ビルドアクション］プロパティが［埋め込まれたリソース］［埋め込まれたリソース］に設定されていることを確認します。
XAML

copyCode<Page xmlns:Finance="using:C1.Xaml.Chart.Finance"
xmlns:Chart="using:C1.Xaml.Chart"
xmlns:c1="using:C1.Xaml"
x:Class="FibonacciVB.TimeZones"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FibonacciVB"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Finance:C1FinancialChart x:Name="financialChart"
ItemsSource="{Binding Data}"
BindingX="Date"
ChartType="Line"
ToolTipContent="{}{seriesName}&#x000A;{Date} {y}"><Finance:FinancialSeries Binding="High,Low,Open,Close"
ChartType="Line"
SeriesName="Box Inc."/><Finance:FibonacciTimeZones x:Name="timeZones"

80

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
Binding="Close"
StartX="0"
EndX="3"><Finance:FibonacciTimeZones.Style><Chart:ChartStyle Stroke="Brown" /></Finance:FibonacciTimeZones.Style></Finance:FibonacciTimeZones><Finance:C1FinancialChart.AxisX><Chart:Axis LabelAngle="45" MajorUnit="3"/></Finance:C1FinancialChart.AxisX></Finance:C1FinancialChart></Grid></Page>DataService.cs に次の参照を追加します。
System.Collections.Generic
System.Linq
System.Runtime.Serialization.Json
System.Reflection
DataService.vb
Public Class DataService
Public Function GetData() As List(Of Quote)Dim path As String = "FibonacciVB.box.json"'FibonacciVBをアプリケーション名で置き換えます。
Dim asm As Assembly = Me.[GetType]().GetTypeInfo().Assembly
Dim stream = asm.GetManifestResourceStream(path)
Dim ser = New DataContractJsonSerializer(GetType(Quote()))
Dim data As Quote() = CType(ser.ReadObject(stream), Quote())
Return data.ToList()
End Function
Shared _ds As DataService
Public Shared Function GetService() As DataService
If _ds Is Nothing Then_ds = New DataService()
End IfReturn _ds
End Function
End Class
DataService.cs
public class DataService{
public List<Quote> GetData(){
string path = "Fibonacci.Resources.box.json";//Fibonacciをアプリケーション名で置き換えます。
var asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);
return data.ToList();}static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();81

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
return _ds;}}
Json Data[{"date":"15/01/23","open":20.2,"high":24.73,"low":20.16,"close":23.23,"volume":42593223},{"date":"15/01/26","open":23.67,"high":24.39,"low":22.5,"close":22.6,"volume":8677164},{"date":"15/01/27","open":22,"high":22.47,"low":21.17,"close":21.3,"volume":3272512},{"date":"15/01/28","open":21.62,"high":21.84,"low":19.6,"close":19.78,"volume":5047364},{"date":"15/01/29","open":19.9,"high":19.95,"low":18.51,"close":18.8,"volume":3419482},{"date":"15/01/30","open":18.47,"high":19.48,"low":18.22,"close":18.81,"volume":2266439},{"date":"15/02/02","open":19.18,"high":19.3,"low":18.01,"close":18.02,"volume":2071168},{"date":"15/02/03","open":18.22,"high":18.64,"low":18.12,"close":18.24,"volume":1587435},{"date":"15/02/04","open":18.2,"high":18.35,"low":17,"close":17.1,"volume":2912224},{"date":"15/02/05","open":17.3,"high":17.31,"low":16.41,"close":16.66,"volume":2682187},{"date":"15/02/06","open":17.39,"high":18.88,"low":17.21,"close":18.12,"volume":3929164},{"date":"15/02/09","open":18.86,"high":19.95,"low":18.45,"close":19.6,"volume":3226650},{"date":"15/02/10","open":20.5,"high":21,"low":19.63,"close":20.99,"volume":2804409},{"date":"15/02/11","open":20.89,"high":21,"low":20.2,"close":20.96,"volume":1698365},{"date":"15/02/12","open":20.66,"high":20.85,"low":19.75,"close":20.17,"volume":1370320},{"date":"15/02/13","open":20.19,"high":20.68,"low":20,"close":20.18,"volume":711951},{"date":"15/02/17","open":19.5,"high":20.1,"low":18.8,"close":19.05,"volume":2093602},{"date":"15/02/18","open":18.31,"high":18.5,"low":17.96,"close":18,"volume":1849490},{"date":"15/02/19","open":18.33,"high":19.25,"low":17.91,"close":18.96,"volume":1311518},{"date":"15/02/20","open":18.68,"high":19.3,"low":18.65,"close":18.85,"volume":1001692},{"date":"15/02/23","open":18.8,"high":18.89,"low":18.11,"close":18.21,"volume":670087},{"date":"15/02/24","open":18.46,"high":19,"low":18.27,"close":18.83,"volume":759263},{"date":"15/02/25","open":18.83,"high":19.48,"low":18.47,"close":18.67,"volume":915580},{"date":"15/02/26","open":18.64,"high":19.2,"low":18.64,"close":18.94,"volume":461283},{"date":"15/02/27","open":18.8,"high":19.12,"low":18.55,"close":18.66,"volume":617199},{"date":"15/03/02","open":18.66,"high":19.09,"low":18.65,"close":18.79,"volume":519605},{"date":"15/03/03","open":18.79,"high":19.21,"low":18.45,"close":18.59,"volume":832415},{"date":"15/03/04","open":18.64,"high":19.05,"low":18.32,"close":19,"volume":539688},{"date":"15/03/05","open":19.2,"high":19.2,"low":18.8,"close":19.14,"volume":486149},{"date":"15/03/06","open":19.03,"high":19.1,"low":18.7,"close":18.91,"volume":685659},{"date":"15/03/09","open":18.98,"high":20.15,"low":18.96,"close":19.4,"volume":1321363},{"date":"15/03/10","open":19.3,"high":19.8,"low":18.85,"close":19.64,"volume":615743},{"date":"15/03/11","open":20.08,"high":20.65,"low":19.24,"close":20.53,"volume":2167167},{"date":"15/03/12","open":17.17,"high":18.2,"low":16.76,"close":18.2,"volume":6837638},{"date":"15/03/13","open":18.05,"high":18.05,"low":17.3,"close":17.88,"volume":1715629},{"date":"15/03/16","open":17.91,"high":18,"low":17.01,"close":17.13,"volume":1321313},{"date":"15/03/17","open":17.28,"high":17.37,"low":16.6,"close":17.12,"volume":1272242},{"date":"15/03/18","open":17.1,"high":17.27,"low":16.91,"close":17.01,"volume":530063},{"date":"15/03/19","open":17,"high":17.28,"low":17,"close":17.06,"volume":536427},{"date":"15/03/20","open":17.13,"high":17.24,"low":16.88,"close":17.21,"volume":1320237},{"date":"15/03/23","open":17.21,"high":17.23,"low":17.01,"close":17.11,"volume":509798},{"date":"15/03/24","open":17.02,"high":17.18,"low":16.82,"close":17,"volume":962149},{"date":"15/03/25","open":16.92,"high":16.99,"low":16.82,"close":16.97,"volume":565673},{"date":"15/03/26","open":16.83,"high":17.56,"low":16.83,"close":17.54,"volume":884523},{"date":"15/03/27","open":17.58,"high":18.3,"low":17.11,"close":18.3,"volume":705626},{"date":"15/03/30","open":18.5,"high":19.4,"low":18.4,"close":19.05,"volume":1151620},{"date":"15/03/31","open":19.08,"high":20.58,"low":18.4,"close":19.75,"volume":2020679},{"date":"15/04/01","open":19.69,"high":19.69,"low":18.55,"close":18.65,"volume":961078},{"date":"15/04/02","open":18.56,"high":18.66,"low":17.85,"close":17.9,"volume":884233},{"date":"15/04/06","open":17.78,"high":17.94,"low":17.51,"close":17.66,"volume":605252},{"date":"15/04/07","open":17.62,"high":17.9,"low":17.53,"close":17.61,"volume":591988},{"date":"15/04/08","open":17.64,"high":17.85,"low":17.32,"close":17.36,"volume":618855},{"date":"15/04/09","open":17.33,"high":17.54,"low":17.1,"close":17.1,"volume":761855},{"date":"15/04/10","open":17.08,"high":17.36,"low":17,"close":17.05,"volume":568373},{"date":"15/04/13","open":17.24,"high":17.26,"low":16.81,"close":17.1,"volume":667142},{"date":"15/04/14","open":17.1,"high":17.89,"low":17.02,"close":17.52,"volume":870138},{"date":"15/04/15","open":17.6,"high":17.99,"low":17.5,"close":17.69,"volume":530456},{"date":"15/04/16","open":17.95,"high":18,"low":17.6,"close":17.82,"volume":548730},{"date":"15/04/17","open":17.75,"high":17.79,"low":17.5,"close":17.79,"volume":446373},{"date":"15/04/20","open":17.63,"high":17.98,"low":17.52,"close":17.93,"volume":487017},{"date":"15/04/21","open":17.96,"high":17.98,"low":17.71,"close":17.92,"volume":320302},

82

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{"date":"15/04/22","open":17.88,"high":18.33,"low":17.57,"close":18.29,"volume":644812},{"date":"15/04/23","open":18.29,"high":18.61,"low":18.18,"close":18.28,"volume":563879},{"date":"15/04/24","open":18.5,"high":18.5,"low":17.61,"close":17.75,"volume":650762},{"date":"15/04/27","open":17.97,"high":18.05,"low":17.45,"close":17.57,"volume":437294},{"date":"15/04/28","open":17.65,"high":17.79,"low":17.39,"close":17.5,"volume":224519},{"date":"15/04/29","open":17.68,"high":17.68,"low":17.1,"close":17.21,"volume":495706},{"date":"15/04/30","open":17.22,"high":17.3,"low":17,"close":17.11,"volume":391040},{"date":"15/05/01","open":17.11,"high":17.55,"low":16.85,"close":17.5,"volume":563075},{"date":"15/05/02","open":17.56,"high":17.85,"low":17.3,"close":17.4,"volume":253138},{"date":"15/05/05","open":17.68,"high":17.68,"low":17.09,"close":17.43,"volume":290935},{"date":"15/05/06","open":17.48,"high":17.48,"low":17,"close":17.04,"volume":313662},{"date":"15/05/07","open":17.05,"high":17.19,"low":16.92,"close":17.04,"volume":360284},{"date":"15/05/08","open":17.13,"high":17.21,"low":16.91,"close":17.1,"volume":297653},{"date":"15/05/11","open":17.16,"high":17.44,"low":17.13,"close":17.31,"volume":268504},{"date":"15/05/12","open":17.28,"high":17.44,"low":16.99,"close":17.24,"volume":376961},{"date":"15/05/13","open":17.24,"high":17.3,"low":17.06,"close":17.2,"volume":244617},{"date":"15/05/14","open":17.24,"high":17.25,"low":17.02,"close":17.08,"volume":252526},{"date":"15/05/15","open":17.06,"high":17.16,"low":16.95,"close":16.95,"volume":274783},{"date":"15/05/18","open":16.95,"high":17.01,"low":16.76,"close":16.87,"volume":418513},{"date":"15/05/19","open":16.93,"high":16.94,"low":16.6,"close":16.83,"volume":367660},{"date":"15/05/20","open":16.8,"high":16.9,"low":16.65,"close":16.86,"volume":297914},{"date":"15/05/21","open":16.9,"high":17.08,"low":16.79,"close":16.88,"volume":229346},{"date":"15/05/22","open":16.9,"high":17.05,"low":16.85,"close":17,"volume":253279},{"date":"15/05/26","open":17.03,"high":17.08,"low":16.86,"close":17.01,"volume":212640},{"date":"15/05/27","open":17.01,"high":17.99,"low":16.87,"close":17.75,"volume":857109},{"date":"15/05/28","open":17.77,"high":17.77,"low":17.44,"close":17.62,"volume":338482}]
コードビューで次の参照を追加します。
System.Collections.Generic
System.Windows
System.Runtime.Serialization
Visual Basic
Public NotInheritable Class MainPage
Inherits Page
Private dataService As DataService = DataService.GetService()
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetData()
End GetEnd Property
End Class<DataContract>
Public Class Quote<DataMember(Name:="date")>Public Property [Date]() As String
Get
Return m_Date
End GetSet
m_Date = ValueEnd SetEnd Property
Private m_Date As String<DataMember(Name:="high")>
Public Property High() As Double
Get
Return m_High83

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPEnd GetSet
m_High = ValueEnd SetEnd Property
Private m_High As Double<DataMember(Name:="low")>
Public Property Low() As Double
Get
Return m_Low
End GetSet
m_Low = ValueEnd SetEnd Property
Private m_Low As Double<DataMember(Name:="open")>
Public Property Open() As Double
Get
Return m_Open
End GetSet
m_Open = ValueEnd SetEnd Property
Private m_Open As Double<DataMember(Name:="close")>Public Property Close() As Double
Get
Return m_Close
End GetSet
m_Close = ValueEnd SetEnd Property
Private m_Close As Double<DataMember(Name:="volume")>
Public Property Volume() As Double
Get
Return m_Volume
End GetSet
m_Volume = ValueEnd SetEnd Property
Private m_Volume As Double
End ClassC#public sealed partial class MainPage : Page{
DataService dataService = DataService.GetService();public MainPage(){this.InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetData();}}84

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP}[DataContract]public class Quote{[DataMember(Name = "date")]public string Date { get; set; }[DataMember(Name = "high")]public double High { get; set; }[DataMember(Name = "low")]
public double Low { get; set; }[DataMember(Name = "open")]public double Open { get; set; }[DataMember(Name = "close")]public double Close { get; set; }[DataMember(Name = "volume")]public double Volume { get; set; }
}
先頭に移動

85

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
ユーザー操作機能
FinancialChart for UWP には、アプリケーションのカスタマイズと高度な開発に役立つ対話式のツールが組み込まれています。範囲セレクタなどの機能を使用すると、エンドユーザーが実行時に FinancialChart のデータの表示範囲を調整できます。
範囲セレクタの詳細については、次のリンクをクリックしてください。
範囲セレクタ範囲セレクタFinancialChart の RangeSelector を使用すると、ユーザーが特定の範囲のデータを選択してチャートに表示できます。さまざまなタイプの株価
チャートに簡単に RangeSelector を連結できます。これは主に金融業界で、さまざまなデータ範囲に対して株価の分析を実行するために使用されています。
RangeSelector には左スクロールボックス（最小値用）と右スクロールボックス（最大値用）があり、チャートの特定の時間をスクロールできます。
ユーザーは RangeSelector の最小値と最大値を変更し、これらのスクロールボックスを左側や右側にドラッグして、チャート内でのデータの表示範囲を調整できます。範囲バーでスクロールボックスを左にドラッグすると値が減少し、右にドラッグする範囲バーの値が増加します。
コードに最小および最大範囲を設定するには、RangeSelectorのMinおよびMaxプロパティを使用します。
次のコードスニペットは、アプリケーションで RangeSelector を使用する方法を具体的に示します。
DataService.cs
public class DataService{
List<Company> _companies = new List<Company>();Dictionary<string, List<Quote>> _cache = new Dictionary<string, List<Quote>>();
private DataService(){_companies.Add(new Company() { Symbol = "box", Name = "Box Inc" });_companies.Add(new Company() { Symbol = "fb", Name = "Facebook" });}public List<Company> GetCompanies(){
return _companies;}
public List<Quote> GetSymbolData(string symbol){
if (!_cache.Keys.Contains(symbol)){string path = string.Format("FinancialChartExplorer.Resources.{0}.json", symbol);
Assembly asm = this.GetType().GetTypeInfo().Assembly;
var stream = asm.GetManifestResourceStream(path);var ser = new DataContractJsonSerializer(typeof(Quote[]));
var data = (Quote[])ser.ReadObject(stream);var dataList = data.ToList();if (IsWindowsPhoneDevice()){
dataList = dataList.Take(20).ToList();}_cache.Add(symbol, dataList);}
return _cache[symbol];}bool IsWindowsPhoneDevice(){
if (Windows.Foundation.Metadata.ApiInformation.
IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))86

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP{
return true;}
return false;}
static DataService _ds;
public static DataService GetService(){
if (_ds == null)_ds = new DataService();return _ds;}}
public class Quote{
public string date { get; set; }public double high { get; set; }public double low { get; set; }public double open { get; set; }public double close { get; set; }public double volume { get; set; }}public class Company{
public string Symbol { get; set; }public string Name { get; set; }}XAML<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Grid.RowDefinitions><RowDefinition /><RowDefinition x:Name="row" Height="100" /></Grid.RowDefinitions><Chart:C1FinancialChart x:Name="candlestickChart" BindingX="date"
Binding="high,low,open,close,volume" ChartType="Candlestick"
ItemsSource="{Binding Data}"><Chart:FinancialSeries /></Chart:C1FinancialChart><Chart:C1FinancialChart x:Name="financialChart" BindingX="date"
Binding="close" ChartType="Line" ToolTip="{x:Null}" Grid.Row="1"
ItemsSource="{Binding Data}"><Chart:FinancialSeries /></Chart:C1FinancialChart><Extension:RangeSelector x:Name="rangeSelector" Grid.Row="1"
ParentChart="{Binding ElementName=financialChart}" ValueChanged="OnRangeSelectorValueChanged"
Margin="20 10 0 10" /></Grid>CodeVisual Basic

copyCode

Partial Public Class RangeSelector
Inherits Page
Private dataService As DataService = dataService.GetService()
Public Sub New()
InitializeComponent()
End Sub
Public ReadOnly Property Data() As List(Of Quote)
Get
Return dataService.GetSymbolData("fb")
End Get87

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
End Property
Sub OnRangeSelectorValueChanged(sender As Object, e As EventArgs)
candlestickChart.AxisX.Min = rangeSelector.LowerValuecandlestickChart.AxisX.Max = rangeSelector.UpperValueEnd Sub
End ClassC#

copyCode

public partial class RangeSelector : Page{
DataService dataService = DataService.GetService();public RangeSelector(){
InitializeComponent();}
public List<Quote> Data{
get{return dataService.GetSymbolData("fb");}}void OnRangeSelectorValueChanged(object sender, EventArgs e){
candlestickChart.AxisX.Min = rangeSelector.LowerValue;
candlestickChart.AxisX.Max = rangeSelector.UpperValue;}}

アニメーション
Financial Chart allows you to control how the animation is applied to each series and series elements. It allows you toenable chart animation effects through a combination of different properties available in the FlexChart class. These
properties allow you to apply duration, delay and an easing function for each animation. The animation effects areapplied in one of the two scenarios, either while loading the chart for the first time or while the chart is redrawn after88

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWP
modifications.
The following image shows how animation works in the Financial Chart control.

To implement animation in the Financial Chart control, you need to make use of the following properties.
Use the following code to implement animation in the FlexChart control.
C#// アニメーションを適用します
financialChart1.AnimationSettings = C1.Chart.AnimationSettings.All;
financialChart1.AnimationUpdate.Easing = C1.Chart.Easing.Linear;financialChart1.AnimationLoad.Type = C1.Chart.AnimationType.Points;
financialChart1.AnimationUpdate.Duration = 10;.
Every animation scenario has its own set of options that can be set independently in the FlexChart control. These
options include various properties describing the corresponding animation.
To implement animation in the FlexChart control, you need make use of the following properties.
1. AnimationSettings -This property allows the user to apply settings for the animation. It allows the user tospecify that when to apply animation in the FlexChart control. This property accepts values fromthe AnimationSettings enumeration provided by the FlexChart class. The AnimationSettings enumeration has
special flags to control axes animation (smooth transition) so that you can enable or disable smooth axis
transition for loading or updating data.
2. AnimationOptions - The AnimationLoad and AnimationUpdate properties includes the following options.
1. Duration -This property allows you to set the duration of animation in the FlexChart control. This
property accepts an integer value which defines duration in milliseconds.
2. Easing - This property allows the user to set different type of easing functions on the FlexChart control.

89

Copyright © GrapeCity Inc. All rights reserved.

FinancialChart for UWPThis property accepts values from the Easing enumeration provided by the C1.Chart namespace.
3. Type – This property allows you to set the animation type on the FlexChart control. This property
accepts the following values from the AnimationType enumeration provided by the C1.Chart
namespace.
All - All plot elements animate at once from the bottom of the plot area.
Series - Each series animates one at a time from the bottom of the plot area.
Points - The plot elements appear one at a time from left to right.

90

Copyright © GrapeCity Inc. All rights reserved.