BarChart for ASP.NET WebForms
手順 1：アプリケーションの設定
クライアント側チュートリアル > BarChart データのドリルダウン > 手順 1：アプリケーションの設定
この手順では、アプリケーションを作成し、そのアプリケーションにいくつかのフォルダを追加します。さらに、それらのフォルダに１つのデータベースファイルと２つのコードファイルを追加します。
  1. プロジェクトに C1.Web.Wijmo.4.dll アセンブリへの参照を追加します。
  2. プロジェクト名を右クリックし、［追加］→［Web フォーム］を選択します。Web フォームの名前を入力し（この場合は、Name）、［OK］をクリックします。
  3. アプリケーション名を右クリックし、［追加］→［ASP.NET フォルダの追加］→［App_Code］を選択します。
  4. アプリケーション名をもう一度右クリックし、リストから［追加］→［ASP.NET フォルダの追加］→［App_Data］を選択します。
  5. App_Code ファイルをクリックします。コードファイルを App_Code ファイルに追加するには、２つの方法があります。
    1. リストから［既存のファイルの追加］を選択します。
      1. サンプル「C1Chart Drilling Down」を参照して選択し、サンプル内の App_Code ファイルを開きます。
      2. Order.cs コードファイルを選択し、［OK］をクリックします。ファイルがアプリケーションに追加されます。
    2. リストから［追加］→［コードファイル］を選択します。コードファイルに「Orders.cs」という名前を付けます。ファイルが開いたら、次のコードを追加します。

    C# コードの書き方

    C#
    コードのコピー
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    /// <summary>
    /// Orders の概要
    /// </summary>
    public class Orders
    {
        private double amount;
        private string year,month,day;
       
       
        public string Year
        {
            get
            {
                return year;
            }
            set
            {
                year = value;
            }
        }
        public string Month
        {
            get
            {
                switch (month)
                {
                    case "1": month = "Jan"; break;
                    case "2": month = "Feb"; break;
                    case "3": month = "Mar"; break;
                    case "4": month = "Apr"; break;
                    case "5": month = "May"; break;
                    case "6": month = "Jun"; break;
                    case "7": month = "Jul"; break;
                    case "8": month = "Aug"; break;
                    case "9": month = "Sep"; break;
                    case "10": month = "Oct"; break;
                    case "11": month = "Nov"; break;
                    case "12": month = "Dec"; break;
                }
                return month;
            }
            set
            {
                month = value;
            }
        }
        public string Day
        {
            get
            {
                return day;
            }
            set
            {
                day = value;
            }
        }
      
        public double OrderAmount
        {
            get
            {
                return amount;
            }
            set
            {
                amount = value;
            }
        }
    }

  6. App_Code ファイルをもう一度クリックします。２つ目のコードファイルをアプリケーションに追加するには、２つの方法があります。
    1. リストから［既存のファイルの追加］を選択します。
      1. サンプル「C1Chart Drilling Down」を参照して選択し、サンプル内の App_Code ファイルを開きます。
      2. GetOrders.cs コードファイルを選択し、［OK］をクリックします。ファイルがアプリケーションに追加されます。
    2. リストから［追加］→［コードファイル］を選択します。コードファイルに「GetOrders.cs」という名前を付けます。ファイルが開いたら、次のコードを追加します。

    C# コードの書き方

    C#
    コードのコピー
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Data;
    using System.Data.OleDb;
    using System.Web.Script.Services;
    /// <summary>
    /// GetOrders の概要
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // ASP.NET AJAX を使用してスクリプトからこの Web サービスを呼び出せるようにするには、次の行のコメントを外します。
    [System.Web.Script.Services.ScriptService]
    public class GetOrders : System.Web.Services.WebService {
        public GetOrders () {
            //デザイン済みのコンポーネントを使用する場合は、次の行のコメントを外します
            //InitializeComponent();
        }
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public List<Orders> GetDataOnLoad()
        {
            OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/OrdersDataBase.mdb"));
            OleDbCommand cmd = new OleDbCommand("Select Year(OrderDate), Sum(OrderAmount) from OrdersByDate where Year(OrderDate) In (Select Distinct(Year(OrderDate)) from OrdersByDate) Group By Year(OrderDate)", con);
            OleDbDataAdapter da = new OleDbDataAdapter(cmd);
            DataTable dt = new DataTable();
            da.Fill(dt);
            List<Orders> orders = new List<Orders>();
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                Orders od = new Orders();
                od.Year = Convert.ToString(dt.Rows[i][0]);
                od.OrderAmount = Convert.ToDouble(dt.Rows[i][1]);
                orders.Add(od);
            }
            return orders;
        }
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public List<Orders> GetOrderByMonth(string Year)
        {
            OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/OrdersDataBase.mdb"));
            OleDbCommand cmd = new OleDbCommand("Select Month(OrderDate), Sum(OrderAmount) from OrdersByDate where Month(OrderDate) In (Select Distinct Month(OrderDate) from OrdersByDate) and Year(OrderDate)="+ Year + " Group By Month(OrderDate)", con);
            OleDbDataAdapter da = new OleDbDataAdapter(cmd);
            DataTable dtMonths = new DataTable();
            da.Fill(dtMonths);
            List<Orders> orders = new List<Orders>();
            for (int i = 0; i < dtMonths.Rows.Count; i++)
            {
                Orders od = new Orders();
                od.Month = Convert.ToString(dtMonths.Rows[i][0]);
                od.OrderAmount = Convert.ToDouble(dtMonths.Rows[i][1]);
                orders.Add(od);
            }
            return orders;
        }
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public List<Orders> GetOrderByDay(string Month, string Year)
        {
            switch (Month)
            {
                case "Jan": Month = "1"; break;
                case "Feb": Month = "2"; break;
                case "Mar": Month = "3"; break;
                case "Apr": Month = "4"; break;
                case "May": Month = "5"; break;
                case "Jun": Month = "6"; break;
                case "Jul": Month = "7"; break;
                case "Aug": Month = "8"; break;
                case "Sep": Month = "9"; break;
                case "Oct": Month = "10"; break;
                case "Nov": Month = "11"; break;
                case "Dec": Month = "12"; break;
            }
            OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/OrdersDataBase.mdb"));
            OleDbCommand cmd = new OleDbCommand("Select Day(OrderDate), Sum(OrderAmount) from OrdersByDate where Day(OrderDate) In (Select Distinct Day(OrderDate) from OrdersByDate) and Year(OrderDate)=" + Year + " and Month(OrderDate)="+Month+" Group By Day(OrderDate)", con);
            OleDbDataAdapter da = new OleDbDataAdapter(cmd);
            DataTable dtDays = new DataTable();
            da.Fill(dtDays);
            List<Orders> orders = new List<Orders>();
            for (int i = 0; i < dtDays.Rows.Count; i++)
            {
                Orders od = new Orders();
                od.Day = Convert.ToString(dtDays.Rows[i][0]);
                od.OrderAmount = Convert.ToDouble(dtDays.Rows[i][1]);
                orders.Add(od);
            }
            return orders;
        }
    }
  7. アプリケーション名をもう一度右クリックし、アプリケーションに必要な Web サービスを追加します。このファイルを追加するには、次の２つの方法があります。
    1. リストから［既存のファイルの追加］を選択します。
      1. 「C1Chart Drilling Down」サンプルを参照します。
      2. GetOrders.asmx ファイルを選択し、［OK］をクリックします。ファイルがアプリケーションに追加されます。
    2. リストから［追加］→［新しい項目］→［WebService.asmx］を選択します。コードファイルに「GetOrders.asmx」という名前を付けます。
      1. ソリューションエクスプローラで、GetOrders.asmx ノードを開き、GetOrders.asmx.cs ファイルを削除します。このファイルは、アプリケーションには必要ありません。
      2. GetOrders.asmx ファイルをダブルクリックして開きます。既存のコードを次の構文に置き換えます。
    ソースビュー
    コードのコピー 
    <%@ WebService Language="C#" CodeBehind="~/App_Code/GetOrders.cs" Class="GetOrders" %>
  8. App_Data フォルダを右クリックし、リストから［追加］→［既存の項目］を選択します。「C1Chart Drill Down」サンプルを保存した場所を参照し、項目 OrdersDataBase.mdb を見つけて選択します。［OK］をクリックして、データベースをアプリケーションに追加します。
関連トピック
手順 2：C1BarChart コントロールの作成

 

 

Copyright © GrapeCity, Inc. All rights reserved.