ASP.NET Core MVC コントロールヘルプ
ウォータフォール
コントロールの使用 > FlexChart > FlexChartの使用 > 系列 > ウォータフォール

ウォータフォール系列は、FlexChart内で正と負の値の進行的な影響を理解するために役立つデータ仮想化形式です。ウォータフォール系列は、主に、連続的な値の推移すなわち増減を理解または説明する分析的な目的で使用されます。

このトピックでは、FlexChartのウォータフォール系列を使用して、エンティティの正と負の値を表す方法について説明します。

次の図は、上記の手順を実行した後のFlexChartを示しています。

手順1：FlexChartのデータソースの作成

  1. ［モデル］フォルダに新しいクラスを追加します（例：Waterfall.cs）。新しいモデルの追加方法については、「コントロールの追加」を参照してください。
  2. 次のコードを新しいモデルに追加して、FlexChartのデータソースになるクラスを定義します。
    C#
    コードのコピー 
    public class Waterfall
    {
        public int WaterfallId { get; set; }
        public string Name { get; set; }
        public int Value { get; set; }
        public Waterfall()
        {
        }
        public Waterfall(string name, int value)
        {
            Name = name;
            Value = value;
        }
        public static List<Waterfall> GetData()
        {
            var names = new string[] { "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" };
            var data = new List<Waterfall>();
            for (int i = 0, len = names.Length; i < len; i++)
            {
                data.Add(new Waterfall(names[i], (((i % 3) + 3) * 1000)));
            };
            return data;
        }
}
先頭に戻る

手順2：FlexChartの追加

FlexChartを初期化するには、次の手順を実行します。

新しいコントローラーの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを右クリックします。
  2. コンテキストメニューから、［追加］→［コントローラー］を選択します。［スキャフォールディングを追加］ダイアログが表示されます。
  3. ［スキャフォールディングを追加］ダイアログで、次の手順を実行します。
    1. ［空のMVCコントローラー］テンプレートを選択します。
    2. コントローラーの名前を設定します（例：FlexChartController）。
    3. ［追加］をクリックします。
  4. 次に示すようにMVC参照を追加します。
    C#
    コードのコピー 
    using C1.Web.Mvc;
using C1.Web.Mvc.Serializition;
using C1.Web.Mvc.Chart;
  5. メソッドIndex()を次のメソッドに置き換えます。
    C#
    コードのコピー 
    public ActionResult Index()
        {
            return View(Waterfall.GetData());
        }

先頭に戻る

コントローラーのビューの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを展開し、FlexChartControllerをダブルクリックして開きます。
  2. メソッドIndex()内にカーソルを置きます。
  3. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  4. ［ビューの追加］ダイアログで、ビュー名がIndex、ビューエンジンがRazor（CSHTML）であることを確認します。
  5. ［追加］をクリックします。コントローラーにビューが追加されます。
    Razor
    コードのコピー 
    @{
    var waterfallStyle = new WaterfallStyles();
    waterfallStyle.ConnectorLines = new SVGStyle { Stroke = "#339", StrokeDasharray = "5 5" };
}
<c1-flex-chart id="flexchart" binding="Value" binding-x="Name" height="300px">
    <c1-items-source source-collection="Model" />
    <c1-flex-chart-waterfall styles="waterfallStyle" relative-data="false" connector-lines="true" />
</c1-flex-chart>

手順3：プロジェクトのビルドおよび実行

  1. ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
  2. ［F5］キーを押してプロジェクトを実行します。
    ブラウザのアドレスバーで、生成されたURLにフォルダ名とビュー名を付加してビューを確認します（例：http://localhost:1234/FlexChart/Index）。
先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.