ASP.NET MVC コントロールヘルプ
クイックスタート：FinancialChartへのデータの追加
コントロールの使用 > FinancialChart > クイックスタート：FinancialChartへのデータの追加

このセクションでは、MVC WebアプリケーションにFinancialChartコントロールを追加し、そこにデータを追加する方法について説明します。

このトピックは5つの手順で構成されます。

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

手順1：FinancialChartを使用する許諾をアプリに与える

  1. ソリューションエクスプローラーで、プロジェクト名（MVCFinancialChartなど）をダブルクリックし、Propertiesノードを展開します。
  2. licenses.licxファイルをダブルクリックして開きます。
  3. licenses.licxファイルで、'C1.Web.Mvc.LicenseDetector, C1.Web.Mvc'の後で［ENTER］を押し、次のコードを貼り付けます。
    licenses.licx
    コードのコピー 
    C1.Web.Mvc.LicenseDetector, C1.Web.Mvc
C1.Web.Mvc.Finance.LicenseDetector, C1.Web.Mvc.Finance

    アプリケーションにライセンスを追加する方法については、「ライセンス」を参照してください。

先頭に戻る

手順2：アプリケーションへの関連する参照の追加

次の手順を実行して、ASP.NET MVC の参照とFinancialChartの参照をプロジェクトに追加します。

  1. ソリューションエクスプローラーで、［参照］を右クリックし、［参照の追加］を選択します。
  2. C:\Program Files (x86)\ComponentOne\ASP.NET MVC \binを参照します。
  3. C1.Web.Mvc.dllとC1.Web.Mvc.Financial.dllを選択し、［追加］をクリックします。
  4. C1.Web.Mvc.dllとC1.Web.Mvc.Financial.dllの［ローカルコピー］プロパティをTrueに設定します。

先頭に戻る

手順3：FinancialChartコントロールを使用するためのアプリケーションの設定

  1. ソリューションエクスプローラーで、［ビュー］フォルダを展開し、web.configファイルをダブルクリックして開きます。
  2. <system.web.webPages.razor></system.web.webPages.razor>タグ内の<namespaces></namespaces>タグに、以下のマークアップを追加します。
    HTML
    コードのコピー 
    <add namespace="C1.Web.Mvc" />
<add namespace="C1.Web.Mvc.Finance" />
<add namespace="C1.Web.Mvc.Finance.Fluent" />

先頭に戻る

手順4：FinancialChartのリソースを登録

ASP.NET MVC FinancialChartコントロールを使用するために必要なリソースを登録するには、次の手順を実行します。

  1. ソリューションエクスプローラーで、［ビュー］→［共有］フォルダを開きます。
  2. _Layout.cshtmlをダブルクリックして開きます。
  3. <head></head>タグの間に次のコードを追加します。
    _Layout.cshtml
    コードのコピー 
    @Html.C1().Styles()
@Html.C1().Scripts().Basic().Finance()

FinancialChartのリソースを登録する方法については、「リソースの登録」を参照してください。

手順5：FinancialChartのデータソースの作成

  1. ［モデル］フォルダに新しいクラスを追加します（例：FData.cs）。新しいモデルの追加方法については、「コントロールの追加」を参照してください。
  2. 次のコードを新しいモデルに追加して、FinancialChartコントロールのデータソースになるクラスを定義します。
    C#
    コードのコピー 
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVCFinancialChart.Models
{
    public class FinanceData
    {
        public DateTime X { 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; }
    }

}
先頭に戻る

手順6：FinancialChartコントロールの追加

FinancialChartコントロールを初期化するには、次の手順を実行します。

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

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

private List<FData> GenerateFinanceData(int count = 60)
{
    List<FData> financeDatas = new List<FData>() { };

    DateTime startTime = new DateTime(2015, 1, 1);
    var rand = new Random();
    double high, low, open, close, volume;
    for (int i = 0; i < count; i++)
    {
        DateTime dt = startTime.AddDays(i);

        if (i > 0)
            open = financeDatas[i - 1].Close;
        else
            open = 188;

        high = open + rand.NextDouble() * 30;
        low = open - rand.NextDouble() * 20;

        close = low + rand.NextDouble() * (high - low);
        volume = rand.Next();

        financeDatas.Add(new FData { X = dt, High = high, Low = low, Open = open, Close = close, Volume = volume });
    }

    return financeDatas;
}

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

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを展開し、コントローラーQuickStartControllerをダブルクリックして開きます。
  2. メソッドQuickStart()内にカーソルを置きます。
  3. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  4. ［ビューの追加］ダイアログで、ビュー名がIndex、ビューエンジンがRazor (CSHTML)であることを確認します。
  5. ［追加］をクリックします。コントローラーにビューが追加されます。
  6. QuickStartビューのFinancialChartコントロールを次のようにインスタンス化します。
    Razor
    コードのコピー 
    @using MVCFinancialChart.Models

@model List<FData>

<script type="text/javascript">
    var tooltipContent = function (ht) {
        var item = ht.series.collectionView.items[ht.pointIndex];
        if (item) {
            return 'Date: ' + wijmo.Globalize.format(ht.x, 'MM月-dd日') + '<br/>' +
                                'High: ' + item.High.toFixed() + '<br/>' +
                                'Low: ' + item.Low.toFixed() + '<br/>' +
                                'Open: ' + item.Open.toFixed() + '<br/>' +
                                'Close: ' + item.Close.toFixed() + '<br/>' +
                                'Volume: ' + item.Volume.toFixed();
        }
    };
</script>

@*FinancialChart コントロールを初期化します。*@
@(Html.C1().FinancialChart()
.Bind(Model)
//グラフの高さと幅を設定します。
.Width(1000)
.BindingX("X")
//グラウのタイプを設定します。
.ChartType(C1.Web.Mvc.Finance.ChartType.ArmsCandleVolume)
.Series(sers =>
{
    sers.Add().Binding("High,Low,Open,Close,Volume");
}).AxisX(x => x.Format("yyyy年MM月dd日"))
.Tooltip(t => t.Content("tooltipContent")))

先頭に戻る

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

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

 

 

Copyright © MESCIUS, Inc. All rights reserved.