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

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

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

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

手順 1：MVC アプリケーションの作成

ComponentOneまたはVisualStudioテンプレートを使用して新しいMVCアプリケーションを作成します。MVCアプリケーションの作成の詳細については、「MVCアプリケーションの設定」を参照してください。

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

  1. ［モデル］フォルダに新しいクラスを追加します（例：FlexChartDataSource.cs）。新しいモデルの追加方法については、「コントロールの追加」を参照してください。
  2. 次のコードを新しいモデルに追加して、FlexChart コントロールのデータソースになるクラスを定義します。
    Index.cshtml
    コードのコピー 
        public class FlexChartDataSource
    {
        
    public string Name { get; set; }

    public int MarPrice { get; set; }
    public int AprPrice { get; set; }
    public int MayPrice { get; set; }

    private IEnumerable<FruitSale> _sales = null;
    public IEnumerable<FruitSale> Sales
    {
        get
        {
            if (_sales == null)
            {
                _sales = GetSales();
            }
            return _sales;
        }
    }


    public static IEnumerable<FlexChartDataSource> GetFruitsSales()
    {
        var rand = new Random(0);
        var fruits = new[] { "オレンジ", "リンゴ", "なし（梨）", "バナナ", "パイナップル" };
        var list = fruits.Select((f, i) =>
        {
            int mar = rand.Next(1, 6);
            int apr = rand.Next(1, 9);
            int may = rand.Next(1, 6);
            return new FlexChartDataSource { Name = f, MarPrice = mar, AprPrice = apr, MayPrice = may };
        });
        
        return list;
    }

    private IEnumerable<FruitSale> GetSales()
    {
        var rand = new Random(0);
        var today = DateTime.Now.Date;
        var firstDay = new DateTime(today.Year-2013, 1, 1);
        var dataTimes = new List<DateTime>();
        for (int i = 0; i < 92; i++)
        
           
        {
            dataTimes.Add(firstDay.AddDays(i + 1));
        }
        var list = dataTimes.Select((date, i) =>

        

        {
            FruitSale sale = new FruitSale { Date = date };
            sale.SalesInChina = rand.Next(150, 250);
            if (i % 30 != 0)
            {
                sale.SalesInUSA = rand.Next(100, 200);
                sale.SalesInJapan = rand.Next(0, 100);
            }
            else
            {
                sale.SalesInUSA = null;
                sale.SalesInJapan = null;
            }

            return sale;
        });

        return list;
    }
}

public class FruitSale
{
    public DateTime Date { get; set; }
    public int? SalesInUSA { get; set; }
    public int? SalesInChina { get; set; }
    public int? SalesInJapan { get; set; }
}
    Index.vbhtml
    コードのコピー 
    Public Class FlexChartDataSource
    Public Property Name() As String
        Get
            Return m_Name
        End Get
        Set
            m_Name = Value
        End Set
    End Property
    Private m_Name As String

    Public Property MarPrice() As Integer
        Get
            Return m_MarPrice
        End Get
        Set
            m_MarPrice = Value
        End Set
    End Property
    Private m_MarPrice As Integer
    Public Property AprPrice() As Integer
        Get
            Return m_AprPrice
        End Get
        Set
            m_AprPrice = Value
        End Set
    End Property
    Private m_AprPrice As Integer
    Public Property MayPrice() As Integer
        Get
            Return m_MayPrice
        End Get
        Set
            m_MayPrice = Value
        End Set
    End Property
    Private m_MayPrice As Integer

    Private _sales As IEnumerable(Of FruitSale) = Nothing
    Public ReadOnly Property Sales() As IEnumerable(Of FruitSale)
        Get
            If _sales Is Nothing Then
                _sales = GetSales()
            End If
            Return _sales
        End Get
    End Property

    Public Shared Function GetFruitsSales() As IEnumerable(Of FlexChartDataSource)
        Dim rand = New Random(0)
        Dim fruits = New String() {"オレンジ", "リンゴ", "なし（梨）", "バナナ", 

"パイナップル"}
        Dim list = fruits.[Select](Function(f, i)
           Dim mar As Integer = rand.[Next](1, 6)
           Dim apr As Integer = rand.[Next](1, 9)
           Dim may As Integer = rand.[Next](1, 6)
           Return New FlexChartDataSource() With {
               Key.Name = f,
               Key.MarPrice = mar,
               Key.AprPrice = apr,
               Key.MayPrice = may
           }

       End Function)

        Return list
    End Function

    Private Function GetSales() As IEnumerable(Of FruitSale)
        Dim rand = New Random(0)
        Dim today = DateTime.Now.[Date]
        Dim firstDay = New DateTime(today.Year - 1, 3, 1)
        Dim dataTimes = New List(Of DateTime)()
        For i As Integer = 0 To 91
            dataTimes.Add(firstDay.AddDays(i + 1))
        Next
        Dim list = dataTimes.[Select](Function([date], i)
              Dim sale As New FruitSale() With {
                  Key.[Date] = [date]
              }
              sale.SalesInChina = rand.[Next](150, 250)
              If i Mod 30 <> 0 Then
                  sale.SalesInUSA = rand.[Next](100, 200)
                  sale.SalesInJapan = rand.[Next](0, 100)
              Else
                  sale.SalesInUSA = Nothing
                  sale.SalesInJapan = Nothing
              End If

              Return sale

          End Function)

        Return list
    End Function
End Class

Public Class FruitSale
    Public Property [Date]() As DateTime
        Get
            Return m_Date
        End Get
        Set
            m_Date = Value
        End Set
    End Property
    Private m_Date As DateTime
    Public Property SalesInUSA() As System.Nullable(Of Integer)
        Get
            Return m_SalesInUSA
        End Get
        Set
            m_SalesInUSA = Value
        End Set
    End Property
    Private m_SalesInUSA As System.Nullable(Of Integer)
    Public Property SalesInChina() As System.Nullable(Of Integer)
        Get
            Return m_SalesInChina
        End Get
        Set
            m_SalesInChina = Value
        End Set
    End Property
    Private m_SalesInChina As System.Nullable(Of Integer)
    Public Property SalesInJapan() As System.Nullable(Of Integer)
        Get
            Return m_SalesInJapan
        End Get
        Set
            m_SalesInJapan = Value
        End Set
    End Property
    Private m_SalesInJapan As System.Nullable(Of Integer)
End Class
先頭に戻る

手順 3：FlexChart コントロールの追加

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

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

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

ビューの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを展開し、コントローラー QuickStartControllerをダブルクリックして開きます。
  2. メソッド QuickStart() 内にカーソルを置きます。
  3. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  4. ［ビューの追加］ダイアログで、ビュー名が QuickStart で、ビューエンジンが Razor（CSHTML）であることを確認します。
  5. ［追加］をクリックします。コントローラーにビューが追加されます。
  6. FlexChart コントロールをビュー QuickStart で次のようにインスタンス化します。
    Razor
    コードのコピー 
    @using MVCFlexChart_JP.Models
@model IEnumerable<FruitSale>
@(Html.C1().FlexChart()
.Bind("Date", Model)
.ChartType(C1.Web.Mvc.Chart.ChartType.SplineSymbols)
.Series(sers =>
  {
      sers.Add()
     .Binding("SalesInJapan")
     .Name("日本での売上");
  })
)

    Index.vbhtml
    コードのコピー 
    @Imports C1.Web.Mvc
@Imports C1.Web.Mvc.Chart
@Imports System.Drawing

@ModelType IEnumerable(Of FruitSale)

@(Html.C1().FlexChart() _
    .Bind("Date", Model) _
    .ChartType(C1.Web.Mvc.Chart.ChartType.Column) _
    .Series(Sub(ser)
                ser.Add() _
                .Binding("SalesInJapan") _
                .Name("日本での売上")
        End Sub) _)

先頭に戻る

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

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

 

 

Copyright © MESCIUS, Inc. All rights reserved.