ComponentOne Studio TrueChart for ASP.NET (C1WebChart2D) ヘルプ
ローソク足チャートのチュートリアル
C1Chart チュートリアル > ローソク足チャートのチュートリアル

このセクションでは、ローソク足チャートを作成する手順を説明します。このグラフは、Y 軸上の4つの Y 変数で株式の高値、安値、始値、および終値が表されるローソク足チャートとして情報を表示し、X 軸の値は各ローソクの位置を示します。

ここでは、次の図のようなグラフを作成します。

デザイン時のローソク足チャートの作成

このトピックでは、[グラフのプロパティ]ダイアログボックスを使用してローソク足チャートを作成する手順を説明します。デザイン時に数段階の簡単な手順でグラフ種別を設定し、データセットを変更し、データをグラフに追加し、ローソクの外観を書式設定する方法を学びます。

注意:この作業では、C1Chart コントロールをフォームに追加済みであることが前提となります。

グラフ種別の設定

スマートタグの[グラフのプロパティ]によるグラフ設定の最初の手順は、利用可能な多数のグラフ種別からギャラリーの種別を選択することです。横棒や折れ線のような基本的なグラフ種別から極や等高線のようなより複雑なグラフまで、C1Chart では、必要なあらゆるデータ視覚化を処理できます。

  1. C1Chart コントロールを右クリックして、そのショートカットメニューから[グラフのプロパティ]を選択します。
  2. ツリービューペインから[グラフ種]を選択して、[シンプル]タブのリストから「Stock」を選択します。
  3. そのペインで、ローソク足チャートを選択して、〈適用〉をクリックします。

データセットの変更

  1. ツリービューペインから[データ]を選択します。 
  2. 削除〉をクリックして、全てのデータセットを削除します。

  3. 追加〉をクリックして、新しいデータセットを追加します。
    新しいデータセットにデータを追加する必要があるとの警告が表示されます。

データセットへのデータの追加

  1. ツリービューペインから[データ]-[データテーブル]を選択します。次のデータをデータテーブルに追加します。
  2. 次の表のようにデータを追加します。
    注意:X は X 軸上の位置を表し、Y、Y1、Y2、Y3 は、それぞれ高値、安値、始値、終値を表します。
  3. 適用〉をクリックしてグラフを更新します。

ローソクの書式設定

次に、線の色を赤に変更し、ローソクの線の太さと本体の幅を太くします。線の色と太さを変更するには LineStyle プロパティを、また、ローソクの本体幅を変更するにはSymbolStyle プロパティを使用します。

  1. ツリービューペインから[データ]を選択して、[グラフデータ]タブを表示します。
  2. ]の横にあるドロップダウン矢印をクリックします。
  3. ]の横にあるドロップダウン矢印をクリックして、「Red」を選択します。
  4. ]の横にあるドロップダウン矢印をクリックして、「2」を選択します。
  5. OK〉をクリックして、[グラフのプロパティ]ダイアログボックスを閉じます。
  6. ノードを[ChartGroups]-[Group0]-[ChartData]と拡張し、[SeriesList]の横にある〈…〉ボタンをクリックします。
    ChartDataSeries コレクションエディタが表示されます。
  7. SymbolStyle を拡張して、SymbolStyle.Size プロパティを 10 に設定します。

    ローソクの本体がデフォルトサイズ(5)から 10 に拡大します。

プログラムによるローソク足チャートの作成

ローソク足チャートは、以下の手順を使用してプログラムで作成できます。

  1. 次の指示文を追加して C1.Win.C1Chart 名前空間を宣言します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー
    Imports C1.Win.C1Chart
    

    C# コードの書き方

    C#
    コードのコピー
    using C1.Win.C1Chart;
    
  2. Form1 をダブルクリックし、以下のコードを Form1_Load プロシージャに追加して、単純なローソク足チャートを作成します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー
    Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
        c1Chart1.ChartGroups(0).ChartData.SeriesList.AddNewSeries()
                                                                            
        'x と y の変数を double として宣言して x、y、y1、y2、y3 の各値を表し、値を割り当て
        Dim x As Double() = New Double() {1, 2, 3, 4, 5}
        Dim y_hi As Double() = New Double() {8, 12, 10, 12, 15}
        Dim y_low As Double() = New Double() {20, 22, 19, 24, 25}
        Dim y_open As Double() = New Double() {10, 16, 17, 15, 23}
        Dim y_close As Double() = New Double() {16, 19, 15, 22, 18}
      
        'x、y、y1、y2、y3 の各データをチャートグループにコピー
        c1Chart1.ChartGroups(0).ChartData(0).X.CopyDataIn(x)
        c1Chart1.ChartGroups(0).ChartData(0).Y.CopyDataIn(y_hi)
        c1Chart1.ChartGroups(0).ChartData(0).Y1.CopyDataIn(y_low)
        c1Chart1.ChartGroups(0).ChartData(0).Y2.CopyDataIn(y_open)
        c1Chart1.ChartGroups(0).ChartData(0).Y3.CopyDataIn(y_close)
            
        'ローソク足チャートをグラフ種別に指定
        c1Chart1.ChartGroups(0).ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Candle
        '上昇時のローソクを透明にして株価の上昇を表示
        c1Chart1.ChartGroups(0).HiLoData.FillTransparent = True
        '線の色を設定
        c1Chart1.ChartGroups(0).ChartData.SeriesList(0).LineStyle.Color = System.Drawing.Color.Red
        '線の太さを設定
        c1Chart1.ChartGroups(0).ChartData.SeriesList(0).LineStyle.Thickness = 2
        'ローソクの本体幅を設定
        c1Chart1.ChartGroups(0).ChartData.SeriesList(0).SymbolStyle.Size = 10
       
    End Sub
    

    C# コードの書き方

    C#
    コードのコピー
    private void Form1_Load(object sender, EventArgs e)
    {
            c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
                                                                            
            //x と y の変数を double として宣言して x、y、y1、y2、y3 の各値を表し、値を割り当て
            double[] x = new double[] { 1, 2, 3, 4, 5 };
            double[] y_hi = new double[] { 8, 12, 10, 12, 15 };
            double[] y_low = new double[] { 20, 22, 19, 24, 25 };
            double[] y_open = new double[] { 10, 16, 17, 15, 23 };
            double[] y_close = new double[] { 16, 19, 15, 22, 18 };
            
            //x、y、y1、y2、y3 の各データをチャートグループにコピー
            c1Chart1.ChartGroups[0].ChartData[0].X.CopyDataIn(x);
            c1Chart1.ChartGroups[0].ChartData[0].Y.CopyDataIn(y_hi);
            c1Chart1.ChartGroups[0].ChartData[0].Y1.CopyDataIn(y_low);
            c1Chart1.ChartGroups[0].ChartData[0].Y2.CopyDataIn(y_open);
            c1Chart1.ChartGroups[0].ChartData[0].Y3.CopyDataIn(y_close);
            
            //ローソク足チャートをグラフ種別に指定
            c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Candle;
            //上昇時のローソクを透明にして株価の上昇を表示
            c1Chart1.ChartGroups[0].HiLoData.FillTransparent = true;
            //線の色を設定
            c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Color = System.Drawing.Color.Red;
            //線の太さを設定
            c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Thickness = 2;
            c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.Size = 10;
            
    }