TrueChart for WinForms (C1Chart2D)
折れ線グラフのチュートリアル
チュートリアル > 折れ線グラフのチュートリアル

このセクションでは、デフォルトのグラフ種別であるシンボル付きの折れ線グラフを作成する方法を説明します。

この例では、折れ線は１本のみであるため、使用するデータセットは１つです。折れ線では、企業の利益の成長を時系列で表示します。水平の軸は年を表し、垂直の軸（この例では Y 軸）は利益を表します。

以下の手順を完了したら、グラフは、次のようになります。


デザイン時のシンボル付き折れ線グラフの作成

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

グラフ種別の設定

  1. C1Chart コントロールを右クリックして、そのショートカットメニューから［グラフのプロパティ］を選択します。
  2. ツリービューペインから［グラフ種］を選択して、［シンプル］タブのリストから「Line」を選択します。
  3. グラフ種別の横にあるペインで、「X-Y グラフ、結線、シンボル」のサブタイプを選択して〈適用〉をクリックします。

    デフォルトの折れ線グラフでは、２つのデータセットが追加され、２つの折れ線が生成されます。

データセットの変更

  1. ツリービューペインから［データ］を選択します。
  2. 〈削除〉をクリックして、「series 1」、「series 2」、「series 3」を削除します。

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

  1. ツリービューペインから［データ］、［データテーブル］を選択します。X テーブル内でクリックし、（X, Y） の数値として （2004, 50）、（2005, 100）、（2006, 150）、（2007, 200）を入力します。注意：カーソルを次の X-Y 値に移動するには、［Tab］キーを押します。
  2. デフォルトの折れ線グラフから最後の XY 値を削除します。
  3. 〈適用〉をクリックしてグラフを更新します。

       

軸の外観の変更

  1. ツリーから［軸X］を選択します。
  2. 「軸X」タブで、タイトル「Year」を入力して、〈フォント〉ボタンをクリックします。［フォント］ダイアログボックスが表示されます。
  3. フォントスタイルを太字に、フォントサイズを 10 に変更して、〈OK〉をクリックします。
  4. ［グラフのプロパティ］ダイアログボックスで〈適用〉をクリックします。X 軸に関する変更が折れ線グラフ上に表示されます。
  5. ツリーから［軸Y］を選択します。
  6. 「軸Y」タブで、タイトル「Profit (thousands of dollars)」を入力して、〈フォント〉ボタンをクリックします。［フォント］ダイアログボックスが表示されます。
  7. フォントスタイルを太字に、フォントサイズを 10 に変更して、〈OK〉をクリックします。
  8. ［グラフのプロパティ］ダイアログボックスで〈適用〉をクリックします。Y 軸に関する変更が折れ線グラフ上に表示されます。
  9. 〈OK〉をクリックして［グラフのプロパティ］ダイアログボックスを閉じます。

プログラムによるシンボル付き折れ線グラフの作成

折れ線グラフは、以下の手順を使用してプログラムで作成できます。

  1.  C1Chart をフォームに追加します。
  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

        'グラフのデータを作成
        Dim xdata() As Double = {2004, 2005, 2006, 2007}
        Dim ydata() As Double = {50, 100, 150, 200}

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

        '１つのデータセットをグラフに追加
        Dim ds As C1.Win.C1Chart.ChartDataSeries = _ C1Chart1.ChartGroups(0).ChartData.SeriesList.AddNewSeries()

        'x と y のデータをコピー
        ds.X.CopyDataIn(xdata)
        ds.Y.CopyDataIn(ydata)

        'グラフ種別を設定
        C1Chart1.ChartGroups(0).ChartType = C1.Win.C1Chart.Chart2DTypeEnum.XYPlot

        'X 軸と Y 軸の新しいフォントを作成
        Dim f As Font = New Font("Arial", 10, FontStyle.Bold)
        C1Chart1.ChartArea.Style.ForeColor = Color.DarkGray
        C1Chart1.ChartArea.AxisX.Font = f
        C1Chart1.ChartArea.AxisX.Text = "Year"
        C1Chart1.ChartArea.AxisX.GridMajor.Visible = True
        C1Chart1.ChartArea.AxisX.GridMajor.Color = Color.LightGray
        C1Chart1.ChartArea.AxisY.Font = f
        C1Chart1.ChartArea.AxisY.Text = "Profit (thousands of dollars)"
        C1Chart1.ChartArea.AxisY.GridMajor.Visible = True
        C1Chart1.ChartArea.AxisY.GridMajor.Color = Color.LightGray

        'デフォルトの折れ線の外観を変更
        ds.LineStyle.Color = Color.LightPink
        ds.LineStyle.Pattern = LinePatternEnum.Solid
        ds.LineStyle.Thickness = 1

        'デフォルトのシンボルの外観を変更
        ds.SymbolStyle.Shape = SymbolShapeEnum.Box
        ds.SymbolStyle.Color = Color.LightPink
        ds.SymbolStyle.OutlineColor = Color.Black
        ds.SymbolStyle.Size = 5
        ds.SymbolStyle.OutlineWidth = 1

        'プロット領域の背景色を設定
        C1Chart1.ChartArea.PlotArea.BackColor = Color.White

End Sub

    C# コードの書き方

    C#
    コードのコピー 
    private void Form1_Load(object sender, EventArgs e)
{

        //グラフのデータを作成
        double[] xdata = { 2004, 2005, 2006, 2007 };
        double[] ydata = { 50, 100, 150, 200 };

        //既存のデータセットをクリア
        c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();

        //１つのデータセットをグラフに追加
        C1.Win.C1Chart.ChartDataSeries ds = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();

        //x と y のデータをコピー
        ds.X.CopyDataIn(xdata);
        ds.Y.CopyDataIn(ydata);

        //グラフ種別を設定
        c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.XYPlot;

        //X 軸と Y 軸の新しいフォントを作成
        Font f = new Font("Arial", 10, FontStyle.Bold);
        c1Chart1.ChartArea.Style.ForeColor = Color.DarkGray;
        c1Chart1.ChartArea.AxisX.Font = f;
        c1Chart1.ChartArea.AxisX.Text = "Year";
        c1Chart1.ChartArea.AxisX.GridMajor.Visible = true;
        c1Chart1.ChartArea.AxisX.GridMajor.Color = Color.LightGray;
        c1Chart1.ChartArea.AxisY.Font = f;
        c1Chart1.ChartArea.AxisY.Text = "Profit (thousands of dollars)";
        c1Chart1.ChartArea.AxisY.GridMajor.Visible = true;
        c1Chart1.ChartArea.AxisY.GridMajor.Color = Color.LightGray;

        //折れ線の外観を変更
        ds.LineStyle.Color = Color.LightPink;
        ds.LineStyle.Pattern = LinePatternEnum.Solid;
        ds.LineStyle.Thickness = 1;

        //シンボルの外観を変更
        ds.SymbolStyle.Shape = SymbolShapeEnum.Box;
        ds.SymbolStyle.Color = Color.LightPink;
        ds.SymbolStyle.OutlineColor = Color.Black;
        ds.SymbolStyle.Size = 5;
        ds.SymbolStyle.OutlineWidth = 1;
        c1Chart1.ChartArea.PlotArea.BackColor = Color.White;

}
関連トピック
円グラフのチュートリアル

 

 

Copyright © GrapeCity, Inc. All rights reserved.