GrapeCity ActiveReports for .NET 16.0J
HiLoCloseチャートの作成
ActiveReportsユーザーガイド > 概念 > ページレポート/RDLレポートの概念 > ページレポート/RDLレポートのレポートコントロール > Chart > プロット > HiLoCloseチャート > HiLoCloseチャートの作成

以下のトピックでは、HiLoCloseチャートを作成する方法を紹介します。このチャートは、ある企業の株価の動きを時系列で表示します。HiLoCloseチャートでは、線の上端と下端が高値と安値を表し、マーカーが終値を表します。最終的なチャートは次のようになります。

High Low Close Chart

新しいレポートを作成する

デザイナアプリにて、[ファイル]メニューをクリックし、 [RDLレポート] を選択して、新しいレポートを作成します。

レポートをデータ連結しデータセットを追加する

[データソースウィザードを開く]オプションをオンにすると、新しいレポートを作成するときに[レポートデータソース]ダイアログが表示されます。このダイアログは、レポートエクスプローラで[データソース]ノードを右クリックして、[データソースの追加]のオプションを選択する時も表示されます。

データソースを追加する

  1. [レポートデータソース]ダイアログで[全般]ページを選択し、名前を「NwindDataSource」に変更します。
  2. 種類を「Json Provider」に設定します。
  3. [コンテンツ]タブに移動し、JSONデータの形式の選択を「埋め込み」に設定します。
  4. [埋め込むファイル/URLの選択、またはデータの入力]フィールドに、次のデータを入力します。

    JSONデータ

    コードのコピー
    [
      {
        "日付": "1/4/2021",
        "終値": 129.41,
        "始値": 133.52,
        "高値": 133.61,
        "安値": 126.76
      },
      {
        "日付": "1/5/2021",
        "終値": 131.01,
        "始値": 128.89,
        "高値": 131.74,
        "安値": 128.43
      },
      {
        "日付": "1/6/2021",
        "終値": 126.6,
        "始値": 127.72,
        "高値": 131.05,
        "安値": 126.38
      },
      {
        "日付": "1/7/2021",
        "終値": 130.92,
        "始値": 128.36,
        "高値": 131.63,
        "安値": 127.86
      },
      {
        "日付": "1/8/2021",
        "終値": 132.05,
        "始値": 132.43,
        "高値": 132.63,
        "安値": 130.23
      },
      {
        "日付": "1/11/2021",
        "終値": 128.98,
        "始値": 129.19,
        "高値": 130.17,
        "安値": 128.5
      },
      {
        "日付": "1/12/2021",
        "終値": 128.8,
        "始値": 128.5,
        "高値": 129.69,
        "安値": 126.86
      },
      {
        "日付": "1/13/2021",
        "終値": 130.89,
        "始値": 128.76,
        "高値": 131.45,
        "安値": 128.49
      },
      {
        "日付": "1/14/2021",
        "終値": 128.91,
        "始値": 130.8,
        "高値": 131,
        "安値": 128.76
      },
      {
        "日付": "1/15/2021",
        "終値": 127.14,
        "始値": 128.78,
        "高値": 130.22,
        "安値": 127
      },
      {
        "日付": "1/19/2021",
        "終値": 127.83,
        "始値": 127.78,
        "高値": 128.71,
        "安値": 126.94
      },
      {
        "日付": "1/20/2021",
        "終値": 132.03,
        "始値": 128.66,
        "高値": 132.49,
        "安値": 128.55
      },
      {
        "日付": "1/21/2021",
        "終値": 136.87,
        "始値": 133.8,
        "高値": 139.67,
        "安値": 133.59
      },
      {
        "日付": "1/22/2021",
        "終値": 139.07,
        "始値": 136.28,
        "高値": 139.85,
        "安値": 135.02
      },
      {
        "日付": "1/25/2021",
        "終値": 142.92,
        "始値": 143.07,
        "高値": 145.09,
        "安値": 136.54
      },
      {
        "日付": "1/26/2021",
        "終値": 143.16,
        "始値": 143.6,
        "高値": 144.3,
        "安値": 141.37
      },
      {
        "日付": "1/27/2021",
        "終値": 142.06,
        "始値": 143.43,
        "高値": 144.3,
        "安値": 140.41
      },
      {
        "日付": "1/28/2021",
        "終値": 137.09,
        "始値": 139.52,
        "高値": 141.99,
        "安値": 136.7
      },
      {
        "日付": "1/29/2021",
        "終値": 131.96,
        "始値": 135.83,
        "高値": 136.74,
        "安値": 130.21
      },
      {
        "日付": "2/1/2021",
        "終値": 134.14,
        "始値": 133.75,
        "高値": 135.38,
        "安値": 130.93
      },
      {
        "日付": "2/2/2021",
        "終値": 134.99,
        "始値": 135.73,
        "高値": 136.31,
        "安値": 134.61
      },
      {
        "日付": "2/3/2021",
        "終値": 133.94,
        "始値": 135.76,
        "高値": 135.77,
        "安値": 133.61
      },
      {
        "日付": "2/4/2021",
        "終値": 137.39,
        "始値": 136.3,
        "高値": 137.4,
        "安値": 134.59
      },
      {
        "日付": "2/5/2021",
        "終値": 136.76,
        "始値": 137.35,
        "高値": 137.42,
        "安値": 135.86
      },
      {
        "日付": "2/8/2021",
        "終値": 136.91,
        "始値": 136.03,
        "高値": 136.96,
        "安値": 134.92
      },
      {
        "日付": "2/9/2021",
        "終値": 136.01,
        "始値": 136.62,
        "高値": 137.88,
        "安値": 135.85
      },
      {
        "日付": "2/10/2021",
        "終値": 135.39,
        "始値": 136.48,
        "高値": 136.99,
        "安値": 134.4
      },
      {
        "日付": "2/11/2021",
        "終値": 135.13,
        "始値": 135.9,
        "高値": 136.39,
        "安値": 133.77
      },
      {
        "日付": "2/12/2021",
        "終値": 135.37,
        "始値": 134.35,
        "高値": 135.53,
        "安値": 133.69
      },
      {
        "日付": "2/16/2021",
        "終値": 133.19,
        "始値": 135.49,
        "高値": 136.01,
        "安値": 132.79
      },
      {
        "日付": "2/17/2021",
        "終値": 130.84,
        "始値": 131.25,
        "高値": 132.22,
        "安値": 129.47
      },
      {
        "日付": "2/18/2021",
        "終値": 129.71,
        "始値": 129.2,
        "高値": 130,
        "安値": 127.41
      },
      {
        "日付": "2/19/2021",
        "終値": 129.87,
        "始値": 130.24,
        "高値": 130.71,
        "安値": 128.8
      },
      {
        "日付": "2/22/2021",
        "終値": 126,
        "始値": 128.01,
        "高値": 129.72,
        "安値": 125.6
      },
      {
        "日付": "2/23/2021",
        "終値": 125.86,
        "始値": 123.76,
        "高値": 126.71,
        "安値": 118.39
      },
      {
        "日付": "2/24/2021",
        "終値": 125.35,
        "始値": 124.94,
        "高値": 125.56,
        "安値": 122.23
      },
      {
        "日付": "2/25/2021",
        "終値": 120.99,
        "始値": 124.68,
        "高値": 126.46,
        "安値": 120.54
      },
      {
        "日付": "2/26/2021",
        "終値": 121.26,
        "始値": 122.59,
        "高値": 124.85,
        "安値": 121.2
      },
      {
        "日付": "3/1/2021",
        "終値": 127.79,
        "始値": 123.75,
        "高値": 127.93,
        "安値": 122.79
      },
      {
        "日付": "3/2/2021",
        "終値": 125.12,
        "始値": 128.41,
        "高値": 128.72,
        "安値": 125.01
      },
      {
        "日付": "3/3/2021",
        "終値": 122.06,
        "始値": 124.81,
        "高値": 125.71,
        "安値": 121.84
      },
      {
        "日付": "3/4/2021",
        "終値": 120.13,
        "始値": 121.75,
        "高値": 123.6,
        "安値": 118.62
      },
      {
        "日付": "3/5/2021",
        "終値": 121.42,
        "始値": 120.98,
        "高値": 121.94,
        "安値": 117.57
      },
      {
        "日付": "3/8/2021",
        "終値": 116.36,
        "始値": 120.93,
        "高値": 121,
        "安値": 116.21
      },
      {
        "日付": "3/9/2021",
        "終値": 121.09,
        "始値": 119.03,
        "高値": 122.06,
        "安値": 118.79
      },
      {
        "日付": "3/10/2021",
        "終値": 119.98,
        "始値": 121.69,
        "高値": 122.17,
        "安値": 119.45
      },
      {
        "日付": "3/11/2021",
        "終値": 121.96,
        "始値": 122.54,
        "高値": 123.21,
        "安値": 121.26
      },
      {
        "日付": "3/12/2021",
        "終値": 121.03,
        "始値": 120.4,
        "高値": 121.17,
        "安値": 119.16
      },
      {
        "日付": "3/15/2021",
        "終値": 123.99,
        "始値": 121.41,
        "高値": 124,
        "安値": 120.42
      },
      {
        "日付": "3/16/2021",
        "終値": 125.57,
        "始値": 125.7,
        "高値": 127.22,
        "安値": 124.72
      },
      {
        "日付": "3/17/2021",
        "終値": 124.76,
        "始値": 124.05,
        "高値": 125.86,
        "安値": 122.34
      },
      {
        "日付": "3/18/2021",
        "終値": 120.53,
        "始値": 122.88,
        "高値": 123.18,
        "安値": 120.32
      },
      {
        "日付": "3/19/2021",
        "終値": 119.99,
        "始値": 119.9,
        "高値": 121.43,
        "安値": 119.68
      },
      {
        "日付": "3/22/2021",
        "終値": 123.39,
        "始値": 120.33,
        "高値": 123.87,
        "安値": 120.26
      },
      {
        "日付": "3/23/2021",
        "終値": 122.54,
        "始値": 123.33,
        "高値": 124.24,
        "安値": 122.14
      },
      {
        "日付": "3/24/2021",
        "終値": 120.09,
        "始値": 122.82,
        "高値": 122.9,
        "安値": 120.07
      },
      {
        "日付": "3/25/2021",
        "終値": 120.59,
        "始値": 119.54,
        "高値": 121.66,
        "安値": 119
      },
      {
        "日付": "3/26/2021",
        "終値": 121.21,
        "始値": 120.35,
        "高値": 121.48,
        "安値": 118.92
      },
      {
        "日付": "3/29/2021",
        "終値": 121.39,
        "始値": 121.65,
        "高値": 122.58,
        "安値": 120.73
      },
      {
        "日付": "3/30/2021",
        "終値": 119.9,
        "始値": 120.11,
        "高値": 120.4,
        "安値": 118.86
      },
      {
        "日付": "3/31/2021",
        "終値": 122.15,
        "始値": 121.65,
        "高値": 123.52,
        "安値": 121.15
      },
      {
        "日付": "4/1/2021",
        "終値": 123,
        "始値": 123.66,
        "高値": 124.18,
        "安値": 122.49
      },
      {
        "日付": "4/5/2021",
        "終値": 125.9,
        "始値": 123.87,
        "高値": 126.16,
        "安値": 123.07
      },
      {
        "日付": "4/6/2021",
        "終値": 126.21,
        "始値": 126.5,
        "高値": 127.13,
        "安値": 125.65
      },
      {
        "日付": "4/7/2021",
        "終値": 127.9,
        "始値": 125.83,
        "高値": 127.92,
        "安値": 125.14
      },
      {
        "日付": "4/8/2021",
        "終値": 130.36,
        "始値": 128.95,
        "高値": 130.39,
        "安値": 128.52
      },
      {
        "日付": "4/9/2021",
        "終値": 133,
        "始値": 129.8,
        "高値": 133.04,
        "安値": 129.47
      },
      {
        "日付": "4/12/2021",
        "終値": 131.24,
        "始値": 132.52,
        "高値": 132.85,
        "安値": 130.63
      },
      {
        "日付": "4/13/2021",
        "終値": 134.43,
        "始値": 132.44,
        "高値": 134.66,
        "安値": 131.93
      },
      {
        "日付": "4/14/2021",
        "終値": 132.03,
        "始値": 134.94,
        "高値": 135,
        "安値": 131.66
      },
      {
        "日付": "4/15/2021",
        "終値": 134.5,
        "始値": 133.82,
        "高値": 135,
        "安値": 133.64
      },
      {
        "日付": "4/16/2021",
        "終値": 134.16,
        "始値": 134.3,
        "高値": 134.67,
        "安値": 133.28
      },
      {
        "日付": "4/19/2021",
        "終値": 134.84,
        "始値": 133.51,
        "高値": 135.47,
        "安値": 133.34
      },
      {
        "日付": "4/20/2021",
        "終値": 133.11,
        "始値": 135.02,
        "高値": 135.53,
        "安値": 131.81
      },
      {
        "日付": "4/21/2021",
        "終値": 133.5,
        "始値": 132.36,
        "高値": 133.75,
        "安値": 131.3
      },
      {
        "日付": "4/22/2021",
        "終値": 131.94,
        "始値": 133.04,
        "高値": 134.15,
        "安値": 131.41
      },
      {
        "日付": "4/23/2021",
        "終値": 134.32,
        "始値": 132.16,
        "高値": 135.12,
        "安値": 132.16
      },
      {
        "日付": "4/26/2021",
        "終値": 134.72,
        "始値": 134.83,
        "高値": 135.06,
        "安値": 133.56
      },
      {
        "日付": "4/27/2021",
        "終値": 134.39,
        "始値": 135.01,
        "高値": 135.41,
        "安値": 134.11
      },
      {
        "日付": "4/28/2021",
        "終値": 133.58,
        "始値": 134.31,
        "高値": 135.02,
        "安値": 133.08
      },
      {
        "日付": "4/29/2021",
        "終値": 133.48,
        "始値": 136.47,
        "高値": 137.07,
        "安値": 132.45
      },
      {
        "日付": "4/30/2021",
        "終値": 131.46,
        "始値": 131.78,
        "高値": 133.56,
        "安値": 131.07
      },
      {
        "日付": "5/3/2021",
        "終値": 132.54,
        "始値": 132.04,
        "高値": 134.07,
        "安値": 131.83
      },
      {
        "日付": "5/4/2021",
        "終値": 127.85,
        "始値": 131.19,
        "高値": 131.49,
        "安値": 126.7
      },
      {
        "日付": "5/5/2021",
        "終値": 128.1,
        "始値": 129.2,
        "高値": 130.45,
        "安値": 127.97
      },
      {
        "日付": "5/6/2021",
        "終値": 129.74,
        "始値": 127.89,
        "高値": 129.75,
        "安値": 127.13
      },
      {
        "日付": "5/7/2021",
        "終値": 130.21,
        "始値": 130.85,
        "高値": 131.26,
        "安値": 129.48
      },
      {
        "日付": "5/10/2021",
        "終値": 126.85,
        "始値": 129.41,
        "高値": 129.54,
        "安値": 126.81
      },
      {
        "日付": "5/11/2021",
        "終値": 125.91,
        "始値": 123.5,
        "高値": 126.27,
        "安値": 122.77
      },
      {
        "日付": "5/12/2021",
        "終値": 122.77,
        "始値": 123.4,
        "高値": 124.64,
        "安値": 122.25
      },
      {
        "日付": "5/13/2021",
        "終値": 124.97,
        "始値": 124.58,
        "高値": 126.15,
        "安値": 124.26
      },
      {
        "日付": "5/14/2021",
        "終値": 127.45,
        "始値": 126.25,
        "高値": 127.89,
        "安値": 125.85
      },
      {
        "日付": "5/17/2021",
        "終値": 126.27,
        "始値": 126.82,
        "高値": 126.93,
        "安値": 125.17
      },
      {
        "日付": "5/18/2021",
        "終値": 124.85,
        "始値": 126.56,
        "高値": 126.99,
        "安値": 124.78
      },
      {
        "日付": "5/19/2021",
        "終値": 124.69,
        "始値": 123.16,
        "高値": 124.92,
        "安値": 122.86
      },
      {
        "日付": "5/20/2021",
        "終値": 127.31,
        "始値": 125.23,
        "高値": 127.72,
        "安値": 125.1
      },
      {
        "日付": "5/21/2021",
        "終値": 125.43,
        "始値": 127.82,
        "高値": 128,
        "安値": 125.21
      },
      {
        "日付": "5/24/2021",
        "終値": 127.1,
        "始値": 126.01,
        "高値": 127.94,
        "安値": 125.94
      },
      {
        "日付": "5/25/2021",
        "終値": 126.9,
        "始値": 127.82,
        "高値": 128.32,
        "安値": 126.32
      },
      {
        "日付": "5/26/2021",
        "終値": 126.85,
        "始値": 126.96,
        "高値": 127.39,
        "安値": 126.42
      },
      {
        "日付": "5/27/2021",
        "終値": 125.28,
        "始値": 126.44,
        "高値": 127.64,
        "安値": 125.08
      },
      {
        "日付": "5/28/2021",
        "終値": 124.61,
        "始値": 125.57,
        "高値": 125.8,
        "安値": 124.55
      },
      {
        "日付": "6/1/2021",
        "終値": 124.28,
        "始値": 125.08,
        "高値": 125.35,
        "安値": 123.94
      },
      {
        "日付": "6/2/2021",
        "終値": 125.06,
        "始値": 124.28,
        "高値": 125.24,
        "安値": 124.05
      },
      {
        "日付": "6/3/2021",
        "終値": 123.54,
        "始値": 124.68,
        "高値": 124.85,
        "安値": 123.13
      },
      {
        "日付": "6/4/2021",
        "終値": 125.89,
        "始値": 124.07,
        "高値": 126.16,
        "安値": 123.85
      },
      {
        "日付": "6/7/2021",
        "終値": 125.9,
        "始値": 126.17,
        "高値": 126.32,
        "安値": 124.83
      },
      {
        "日付": "6/8/2021",
        "終値": 126.74,
        "始値": 126.6,
        "高値": 128.46,
        "安値": 126.21
      }
    ]
    

データセットを追加する

  1. [データセット]ダイアログで、[全般]ページを選択し、[名前]フィールドに「StockPrice」と入力します。
  2. [データセット]ダイアログの[クエリ]ページで、[クエリ]フィールドに次のクエリを入力します。
    データセットクエリ
    Copy Code
    $.[*]
       
  3. クエリを検証するために、クエリボックスの横にある[データセットの検証]アイコンをクリックします。
  4. [OK]をクリックして変更を保存します。

チャートを作成する

チャートウィザードを使用して、チャートのデータ値を構成し、チャートをカスタマイズします。レポートがデータセットに接続している場合、チャートウィザードは自動的に表示されます。詳細については、「チャートウィザード」を参照してください。

  1. Chartコントロールをレポートのデザイン面にドラッグ&ドロップします。チャートウィザードが表示され、データセットとチャートの種類を選択できます。
  2. データセット名を「StockPrice」に設定し、[種類の設定]を「HiLoClose」に設定します。
  3. [次へ]をクリックし、チャートの高値、安値、終値を定義します。
  4. [データ]では、高値、安値、終値フィールドを次の値に設定します。
    高値フィールド 安値フィールド 終値フィールド
    =[高値] =[安値] =[終値]
  5. [カテゴリ]では、フィールドを「=[日付]」に設定します。
  6. [次へ]をクリックして、グラフをプレビューします。
     High Low Close Chart Dialog Box
    プレビュー画面では、チャートのパレットを変更したり、その他のカスタマイズを行うこともできます。または、以下で説明するように、ウィザードを終了してこれらのスマートパネルにアクセスできます。

カスタマイズを設定する

グラフがデータ値で構成されたので、スマートパネルを使用して、グラフ要素をカスタマイズします。

プロット

  1. プロットの詳細設定用のスマートパネルを開くには、レポートエクスプローラで[プロット-Plot1]を右クリックし、[プロパティ]ウィンドウを選択します。
  2. [外観]ページに移動し、次のプロパティを設定します。
    • 線 > スタイル:Solid
    • 線 > 色:#8fcd37
    • 線 > 幅:1pt
  3. [OK]をクリックして、プロットの設定を完了します。

Y軸

  1. Y軸の詳細設定用のスマートパネルを開くには、レポートエクスプローラで[Y軸 - [Plot1]]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [タイトル]ページに移動し、[タイトル]フィールドからテキストを削除して、グラフのY軸のタイトルを非表示にします。
  3. [ラベル]ページに移動し、[全般]タブを選択し、[書式]を「Currency(最小桁数0)」に設定します。
  4. [外観]タブを選択し、次のプロパティを設定します。
    • フォント > サイズ:12pt
    • フォント > 色:DimGray
  5. [軸線]ページに移動し、次のプロパティを設定します。
    • 軸を表示する:チェックボックスをオンにします。
    • :Black
    • :1pt
    • スタイル:Solid
  6. [主グリッド線]ページに移動し、次のプロパティを設定します。
    • 間隔:10
    • グリッド線 > グリッド線を表示する:オンにします。
    • グリッド線 > 幅:0.25pt
    • グリッド線 > 色:#cccccc
    • グリッド線 > スタイル:Dashed
    • 目盛 > 位置:Outside
    • 目盛 > 色:#cccccc
    • 目盛 > 幅:0.25pt
    • 目盛 > スタイル:Solid
  7. [OK]をクリックして、Y軸の設定を完了します。

X軸

  1. X軸の詳細設定用のスマートパネルを開くには、レポートエクスプローラで[X軸 - [Plot1]]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [タイトル]ページに移動し、[タイトル]フィールドからテキストを削除して、グラフのX軸のタイトルを非表示にします。
  3. [ラベル]ページに移動し、[全般]タブを選択し、次のプロパティを設定します。
    • 書式:Short date
    • 角度:-45
  4. [外観]タブを選択し、次のプロパティを設定します。
    • フォント > サイズ:12pt
    • フォント > 色:DimGray
  5. [軸線]ページに移動し、次のプロパティを設定します。
    • 軸を表示する:チェックボックスをオンにします。
    • :Black
    • :1pt
    • スタイル:Solid
  6. [主グリッド線]ページに移動し、、次のプロパティを設定します。
    • 間隔:7(週足での表示)
    • グリッド線 > グリッド線を表示する:オンにします。
    • グリッド線 > 幅:0.25pt
    • グリッド線 > 色:#cccccc
    • グリッド線 > スタイル:Dashed
    • 目盛 > 位置:Outside
    • 目盛 > 色:#cccccc
    • 目盛 > 幅:0.25pt
    • 目盛 > スタイル:Solid
  7. [OK]をクリックして、X軸の設定を完了します。

ヘッダ

  1. グラフヘッダのスマートパネルを開くには、レポートエクスプローラで[ヘッダ]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [全般]ページに移動し、[タイトル]を「株価チャート」に設定します。
  3. [フォント]ページに移動し、次のプロパティを設定します。
    • サイズ:24pt
    • :#3da7a8
  4. [OK]をクリックして、グラフヘッダの設定を完了します。
    必要に応じて、グラフのサイズを変更することができます。
       High Low Close Chart at Design Time
  5. チャートの構成とカスタマイズが完了したら、レポートをプレビューします。