ComponentOne Studio TrueChart for ASP.NET (C1WebChart2D) ヘルプ
横棒グラフのチュートリアル
C1Chart チュートリアル > 横棒グラフのチュートリアル

このセクションでは、単純な横棒グラフを作成する手順を説明します。このグラフでは、各製品価格の数値を表す y 軸１本を持つ単純な横棒グラフとして情報を表示します。x 軸の各値にはラベルが付けられます。

次の図に、作成するグラフをあらかじめ示します。


デザイン時の横棒グラフの作成

［グラフのプロパティ］ダイアログボックスを使用して単純な横棒グラフを作成する手順を説明します。このトピックでは、デザイン時に数段階の簡単な手順で特定のグラフ種別を設定し、データ系列を変更し、データをグラフに追加し、軸に注釈を付加する方法を学びます。

この作業では、C1Chart コントロールをフォームに追加済みであることが前提となります。

グラフ種別の設定

  1. C1Chart コントロールを右クリックして、そのショートカットメニューから［グラフのプロパティ］を選択します。
  2. ツリービューペインから［グラフ種］を選択して、［シンプル］タブのリストから「Bar」を選択します。
  3. そのペインで、左上の横棒を選択して、〈適用〉をクリックします。

データセットの変更

  1. ツリービューペインから［データ］を選択します。
  2. 〈削除〉をクリックして、全てのデータセットを削除します。
  3. 〈追加〉をクリックして、新しいデータセットを追加します。

    新しいデータセットにデータを追加する必要があるとの警告が表示されます。

データセットへのデータの追加

  1. ツリービューペインから［データ］-［データテーブル］を選択します。
  2. テーブル内をクリックし、（X, Y） の数値として（0, 80）、（1, 400）、（2, 20）、（3, 60）、（4, 150）、（5, 300）、（6, 130）、（7, 500）を入力します。 
    注意：カーソルを次の X-Y 値に移動するには、［Tab］キーを押します。
  3. 〈適用〉をクリックしてグラフを更新します。

     

軸の設定

 次に、x 軸と y 軸にラベルを付加します。x 軸にはテキスト目盛形式のラベルを使用します。こちらの詳細については、「テキスト目盛形式の軸ラベル」トピックを参照してください。

  1. ツリービューペインから［軸X］を選択して、「ラベル」タブを選択します。
  2.  ［添付方法］ドロップダウンリストボタンから ValueLabels を選択します。

    〈ラベル〉ボタンが表示されます。

  3. 〈ラベル〉ボタンをクリックして、ValueLabel コレクションエディタを開きます。
  4. 〈追加〉ボタンを８回クリックして、８つのラベルを追加します。
  5. ［メンバ］リストボックスで１つめの値ラベルを選択して、その NumericValue プロパティを０に、Text プロパティを「Hand Mixer」に設定します。
  6. 残りの値ラベルのプロパティを次のように設定します。
    • ValueLabel1 の NumericValue を１に、Text を「Stand Mixer」に設定。
    • ValueLabel2 の NumericValue を２に、Text を「Can Opener」に設定。
    • ValueLabel3 の NumericValue を３に、Text を「Toaster」に設定。
    • ValueLabel4 の NumericValue を４に、Text を「Blender」に設定。
    • ValueLabel5 の NumericValue を５に、Text を「Food Processor」に設定。
    • ValueLabel6 の NumericValue を６に、Text を「Slow Cooker」に設定。
    • ValueLabel7 の NumericValue を７に、Text を「Microwave」に設定。
  7. 〈OK〉をクリックして、 X 軸にラベルを適用します。
  8. ツリービューペインから［軸Y］を選択して、「ラベル」タブを選択します。
  9. ［書式］ドロップダウンリストボックスから NumericCurrency を選択します。

軸のタイトルの設定

  1. ツリービューペインから［軸X］を選択して、タイトルを「Kitchen Electronic」に設定します。これにより、X 軸のタイトルが設定されます。
  2. ツリービューペインから［軸Y］を選択して、タイトルを「Price」に設定します。これにより、Y 軸のタイトルが設定されます。
  3. 〈OK〉をクリックして［グラフのプロパティ］ダイアログボックスを閉じます。

プログラムによる横棒グラフの作成

単純な横棒グラフは、以下の手順を使用してプログラムで作成できます。

  1. C1Chart コントロールをフォームに追加します。Add the C1Chart control to the form.
  2. フォームを右クリックし、［コードの表示］を選択してコードファイルを表示してから、次の指示文を追加して C1.Win.C1Chart 名前空間を宣言します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Imports C1.Win.C1Chart;

    C# コードの書き方

    C#
    コードのコピー 
    using C1.Win.C1Chart;
  3. Form1 をダブルクリックし、以下のコードを Form1_Load プロシージャに追加して、単純な横棒グラフを作成します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

    ' 既存データをクリア
    C1Chart1.ChartGroups(0).ChartData.SeriesList.Clear()

    ' データを追加
    Dim ProductNames() As String = {"Hand Mixer", "Stand Mixer", "Can Opener", "Toaster" ,"Blender" ,"Food Processor" ,"Slow Cooker" ,"Microwave"}
    Dim PriceX() As Integer = {80, 400, 20, 60, 150, 300, 130, 500}

    ' １つめのデータセットを作成
    Dim ds1 As C1.Win.C1Chart.ChartDataSeries = _
        C1Chart1.ChartGroups(0).ChartData.SeriesList.AddNewSeries()
    ds1.Label = "PriceX"
    ds1.X.CopyDataIn(ProductNames)
    ds1.Y.CopyDataIn(PriceX)

    ' グラフ種別を設定
    c1Chart1.ChartArea.Inverted = True
    c1Chart1.ChartGroups(0).ChartType = _
    c1.Win.C1Chart.Chart2DTypeEnum.Bar

    ' 軸のタイトルを設定
     c1Chart1.ChartArea.AxisX.Text = "Kitchen Electronics"
     c1Chart1.ChartArea.AxisY.Text = "Price"    

    ' 軸Yラベルの書式を設定
        c1Chart1.ChartArea.AxisY.AnnoFormat = FormatEnum.NumericCurrency
End Sub

    C# コードの書き方

    C#
    コードのコピー 
    private void Form1_Load(object sender, EventArgs e)
{
     // 既存データをクリア
     c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();

     // データを追加 
     string[] ProductNames = { "Hand Mixer", "Stand Mixer", "Can Opener", "Toaster" ,"Blender" ,"Food Processor" ,"Slow Cooker" ,"Microwave"};
     int[] PriceX = { 80, 400, 20, 60, 150, 300, 130, 500 };
           
     // １つめのデータセットを作成
     C1.Win.C1Chart.ChartDataSeries ds1 = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
     ds1.Label = "Price X";
            
     // ChartDataArray オブジェクトの CopyDataIn メソッドを使用してデータを設定 
     ds1.X.CopyDataIn(ProductNames);
     ds1.Y.CopyDataIn(PriceX);
 
     // グラフ種別を設定 
     c1Chart1.ChartArea.Inverted = true;
     c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Bar;
 
     // 軸のタイトルを設定
     c1Chart1.ChartArea.AxisX.Text = "Kitchen Electronics";
     c1Chart1.ChartArea.AxisY.Text = "Price";
 
    // 軸Yラベルの書式を設定
     c1Chart1.ChartArea.AxisY.AnnoFormat = FormatEnum.NumericCurrency;
}

 

 

Copyright © GrapeCity inc. All rights reserved.