[Chart][Tips] コードから折れ線グラフを作成する

今回はコードから折れ線グラフを作成する例を紹介します。

といっても前回の「コードから棒グラフを作成する」で紹介したコードの一部を変更するだけです。

グラフを折れ線にするにはChartTypeプロパティSeriesChartType.Lineを指定します。

下記は、コードから折れ線グラフを作成する例です。

データとしてアクセス数を表示しています。

VBの例

Imports System.Windows.Forms.DataVisualization.Charting

' フォームロード時の処理
Private Sub Form4_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
    '初期化
    Chart1.Series.Clear()

    'データの取得
    Dim ds As DataSet = GetData()

    'Chartコントロールにデータソースを設定
    Chart1.DataSource = ds

    'Chartコントロールにタイトルを設定
    Chart1.Titles.Add("アクセス数とユニークユーザー数")

    'グラフの種類,系列,軸の設定
    For I As Integer = 1 To ds.Tables(0).Columns.Count - 1
        '列名の取得
        Dim columnName As String = ds.Tables(0).Columns(I).ColumnName

        '系列の設定
        Chart1.Series.Add(columnName)

        '★★★グラフの種類を折れ線グラフにする★★★
        Chart1.Series(columnName).ChartType = SeriesChartType.Line

        'X軸
        Chart1.Series(columnName).XValueMember = ds.Tables(0).Columns(0).ColumnName.ToString
        Chart1.ChartAreas(0).AxisX.MajorGrid.Enabled = False
        Chart1.ChartAreas(0).AxisX.MinorGrid.Enabled = False

        'Y軸
        Chart1.Series(columnName).YValueMembers = columnName
    Next

    'X軸タイトル
    Chart1.ChartAreas(0).AxisX.Title = "月"

    Chart1.DataBind()
End Sub

' データの設定
Private Function GetData() As DataSet
    Dim ds As New DataSet
    Dim dt As New DataTable
    Dim dtRow As DataRow

    '列の作成
    dt.Columns.Add("月", Type.GetType("System.String"))
    dt.Columns.Add("アクセス数", Type.GetType("System.Int32"))
    ds.Tables.Add(dt)

    'データの追加
    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/01"
    dtRow(1) = "945"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/02"
    dtRow(1) = "1023"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/03"
    dtRow(1) = "2121"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/04"
    dtRow(1) = "2179"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/05"
    dtRow(1) = "2063"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/06"
    dtRow(1) = "2107"
    ds.Tables(0).Rows.Add(dtRow)

    Return (ds)
End Function

C#の例

using System.Windows.Forms.DataVisualization.Charting;

// フォームロード時の処理
private void Form4_Load(object sender, EventArgs e)
{
    // 初期化
    chart1.Series.Clear();

    // データの取得
    DataSet ds = GetData();

    // Chartコントロールにデータソースを設定
    chart1.DataSource = ds;

    // Chartコントロールにタイトルを設定
    chart1.Titles.Add("アクセス数とユニークユーザー数");

    // グラフの種類,系列,軸の設定
    for (int i = 1; i < ds.Tables[0].Columns.Count; i++)
    {
        // 列名の取得
        string columnName = ds.Tables[0].Columns[i].ColumnName;

        // 系列の設定
        chart1.Series.Add(columnName);

        // ★★★グラフの種類を折れ線グラフにする★★★
        chart1.Series[columnName].ChartType = SeriesChartType.Line;

        // X軸
        chart1.Series[columnName].XValueMember = ds.Tables[0].Columns[0].ColumnName.ToString();
        chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
        chart1.ChartAreas[0].AxisX.MinorGrid.Enabled = false;

        // Y軸
        chart1.Series[columnName].YValueMembers = columnName;
    }

    // X軸タイトル
    chart1.ChartAreas[0].AxisX.Title = "月";

    chart1.DataBind();
}

// データの設定
private DataSet GetData()
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    DataRow dtRow;

    // 列の作成
    dt.Columns.Add("月", Type.GetType("System.String"));
    dt.Columns.Add("アクセス数", Type.GetType("System.Int32"));
    dt.Columns.Add("ユニークユーザー数", Type.GetType("System.Int32"));
    ds.Tables.Add(dt);

    // データの追加
    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/01";
    dtRow[1] = "945";
    ds.Tables[0].Rows.Add(dtRow);

    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/02";
    dtRow[1] = "1023";
    ds.Tables[0].Rows.Add(dtRow);

    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/03";
    dtRow[1] = "2121";
    ds.Tables[0].Rows.Add(dtRow);

    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/04";
    dtRow[1] = "2179";
    ds.Tables[0].Rows.Add(dtRow);

    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/05";
    dtRow[1] = "2063";
    ds.Tables[0].Rows.Add(dtRow);

    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/06";
    dtRow[1] = "2107";
    ds.Tables[0].Rows.Add(dtRow);

    return ds;
}

[Chart][Tips] コードから棒グラフを作成する


コードから棒グラフを作成する例を紹介します。

Chartコントロールに表示するデータは1つずつ追加することも可能ですが、データベースから取得して表示する場合もあるのではないでしょうか?

このような場合にはDataSourceプロパティを使用して、取得したデータをバインドして使用することが可能です。

グラフのタイトルはTitlesプロパティAddメソッドで追加します。

データ系列はSeriesプロパティAddメソッドで追加を行います。紹介するサンプルコードの中ではデータテーブルの2列目と3列目が系列になるように設定しています。

グラフの種類はSeriesプロパティのChartTypeプロパティで設定を行います。今回は棒グラフとするためSeriesChartType.Columnを指定しています。

軸値の設定はSeriesプロパティのXValuMemberプロパティYValueMemberプロパティで行います。

また、今回はX軸のグリッドを非表示にしたいのでMajorGridMinorGridプロパティのEnabledプロパティにFalseを設定しています。

最後に軸のタイトルですがAxisXおよびAxisYプロパティのTitleプロパティで設定します。

下記はコードから棒グラフを作成する例です。

VBの例

Imports System.Windows.Forms.DataVisualization.Charting

' フォームロード時の処理
Private Sub Form3_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
    '初期化
    Chart1.Series.Clear()

    'データの取得
    Dim ds As DataSet = GetData()

    'Chartコントロールにデータソースを設定
    Chart1.DataSource = ds

    'Chartコントロールにタイトルを設定
    Chart1.Titles.Add("アクセス数とユニークユーザー数")

    'グラフの種類,系列,軸の設定
    For I As Integer = 1 To ds.Tables(0).Columns.Count - 1
        '列名の取得
        Dim columnName As String = ds.Tables(0).Columns(I).ColumnName

        '系列の設定
        Chart1.Series.Add(columnName)

        'グラフの種類
        Chart1.Series(columnName).ChartType = SeriesChartType.Column

        'X軸
        Chart1.Series(columnName).XValueMember = ds.Tables(0).Columns(0).ColumnName.ToString
        Chart1.ChartAreas(0).AxisX.MajorGrid.Enabled = False
        Chart1.ChartAreas(0).AxisX.MinorGrid.Enabled = False

        'Y軸
        Chart1.Series(columnName).YValueMembers = columnName
    Next

    'X軸タイトル
    Chart1.ChartAreas(0).AxisX.Title = "月"

    Chart1.DataBind()
End Sub

' データの設定
Private Function GetData() As DataSet
    Dim ds As New DataSet
    Dim dt As New DataTable
    Dim dtRow As DataRow

    '列の作成
    dt.Columns.Add("月", Type.GetType("System.String"))
    dt.Columns.Add("アクセス数", Type.GetType("System.Int32"))
    dt.Columns.Add("ユニークユーザー数", Type.GetType("System.Int32"))
    ds.Tables.Add(dt)

    'データの追加
    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/01"
    dtRow(1) = "945"
    dtRow(2) = "4203"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/02"
    dtRow(1) = "1023"
    dtRow(2) = "3302"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/03"
    dtRow(1) = "2121"
    dtRow(2) = "7065"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/04"
    dtRow(1) = "2179"
    dtRow(2) = "7753"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/05"
    dtRow(1) = "2063"
    dtRow(2) = "6373"
    ds.Tables(0).Rows.Add(dtRow)

    dtRow = ds.Tables(0).NewRow
    dtRow(0) = "2011/06"
    dtRow(1) = "2107"
    dtRow(2) = "4210"
    ds.Tables(0).Rows.Add(dtRow)

    Return (ds)
End Function

C#の例

using System.Windows.Forms.DataVisualization.Charting;

// フォームロード時の処理
private void Form3_Load(object sender, EventArgs e)
{
    // 初期化
    chart1.Series.Clear();

    // データの取得
    DataSet ds = GetData();

    // Chartコントロールにデータソースを設定
    chart1.DataSource = ds;

    // Chartコントロールにタイトルを設定
    chart1.Titles.Add("アクセス数とユニークユーザー数");

    // グラフの種類,系列,軸の設定
    for( int i = 1; i < ds.Tables[0].Columns.Count; i++ )
    {
        // 列名の取得
        string columnName = ds.Tables[0].Columns[i].ColumnName;

        // 系列の設定
        chart1.Series.Add(columnName);

        // グラフの種類
        chart1.Series[columnName].ChartType = SeriesChartType.Column;

        // X軸
        chart1.Series[columnName].XValueMember = ds.Tables[0].Columns[0].ColumnName.ToString();
        chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
        chart1.ChartAreas[0].AxisX.MinorGrid.Enabled = false;

        // Y軸
        chart1.Series[columnName].YValueMembers = columnName;
    }

    // X軸タイトル
    chart1.ChartAreas[0].AxisX.Title = "月";

    chart1.DataBind();
}

/// データの設定
private DataSet GetData()
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    DataRow dtRow;

    // 列の作成
    dt.Columns.Add("月", Type.GetType("System.String"));
    dt.Columns.Add("アクセス数", Type.GetType("System.Int32"));
    dt.Columns.Add("ユニークユーザー数", Type.GetType("System.Int32"));
    ds.Tables.Add(dt);

    // データの追加
    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/01";
    dtRow[1] = "945";
    dtRow[2] = "4203";
    ds.Tables[0].Rows.Add(dtRow);
    
    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/02";
    dtRow[1] = "1023";
    dtRow[2] = "3302";
    ds.Tables[0].Rows.Add(dtRow);

    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/03";
    dtRow[1] = "2121";
    dtRow[2] = "7065";
    ds.Tables[0].Rows.Add(dtRow);

    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/04";
    dtRow[1] = "2179";
    dtRow[2] = "7753";
    ds.Tables[0].Rows.Add(dtRow);

    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/05";
    dtRow[1] = "2063";
    dtRow[2] = "6373";
    ds.Tables[0].Rows.Add(dtRow);

    dtRow = ds.Tables[0].NewRow();
    dtRow[0] = "2011/06";
    dtRow[1] = "2107";
    dtRow[2] = "4210";
    ds.Tables[0].Rows.Add(dtRow);

    return ds;
}

[Chart][Tips] Chartコントロールの基本を押さえる(2)

今回はChartコントロールにタイトルと軸の設定方法を紹介します。

まずタイトルの設定ですが、Titlesプロパティ欄に表示される[…]ボタンをクリックします。

Titleコレクションエディター」が表示されるので[追加]ボタンをクリックします。

Titlesプロパティのデータ型はTitleCollection型であるため、[追加]ボタンをクリックしてタイトル表示欄を増やすことが可能です。

追加したメンバーを選択して、「外観」欄にある(Text)に表示したいグラフタイトルを入力します。

 

次に軸の設定について見ていきましょう。

軸の設定はChartAreasプロパティが持つAxesプロパティで設定します。

まずは、ChartAreasプロパティ欄に表示される[…]ボタンをクリックして「ChartAreコレクションエディター」を表示します。

次に、メンバーを選択してAxesプロパティ欄に表示される[…]ボタンをクリックして「Axesコレクションエディター」を表示します。

メンバー一覧の「X Axes」および「Y Axes(Value)」は第1軸を、「Secondary X Axes」および「Secondary Y Axes(Value)」は第2軸を表します。

グリッド線の表示/非表示はMajorGridプロパティ(主要グリッド線)のEnabledプロパティおよびMinorGridプロパティ(補助グリッド線)のEnabledプロパティで設定します。

MajorGridプロパティは主要グリッド線を、MidorGridプロパティは補助グリッド線を表しています。

また、目盛りのスタイルはMajorTickMarkプロパティ(主要目盛り)とMinorTickMarkプロパティ(補助メモリ)で設定します。

目盛りマークを表示/非表示はEnabledプロパティで設定し、内側や外側に表示するといった表示スタイルの設定はTickMarkStyleプロパティで設定します・

最後に、軸のタイトルですが、これはTitleプロパティで設定します。

以上を踏まえ作成したグラフ例は下図の通りです。

今回紹介した以外にも多くのプロパティがありますが、基本を押さえるという意味では十分かと思います。

[Chart][Tips] Chartコントロールの基本を押さえる

ツールボックスの「データ」カテゴリーにはChartコントロールがあります。

Chartコントロールは表1に示すように非常に多くの種類のグラフを作成することが可能です。

表1 Chartコントロールで作成できるグラフの種類(SeriesChartType列挙体)
メンバ名 説明
 Area  面グラフ
 Bar  横棒グラフ
 BoxPlot  ボックス プロット グラフ
 Bubble  バブル チャート
 Candlestick  ローソク足チャート
 Column  縦棒グラフ
 Doughnut  ドーナツ グラフ
 ErrorBar  誤差範囲グラフ
 FastLine  FastLine グラフ
 FastPoint  FastPoint グラフ
 Funnel  じょうごグラフ
 Kagi  かぎ足チャート
 Line  折れ線グラフ
 Pie  円グラフ
 PointAndFigure  PointAndFigure グラフ
 Polar  極座標グラフ
 Pyramid  ピラミッド グラフ
 Radar  レーダー チャート
 Range  範囲グラフ
 RangeBar  RangeBar グラフ
 RangeColumn  範囲縦棒グラフ
 Renko  練行足チャート
 Spline  スプライン グラフ
 SplineArea  スプライン面グラフ
 SplineRange  スプライン範囲グラフ
 StackedArea  積み上げ面グラフ
 StackedArea100  100% 積み上げ面グラフ
 StackedBar  積み上げ横棒グラフ
 StackedBar100  100% 積み上げ横棒グラフ
 StackedColumn  積み上げ縦棒グラフ
 StackedColumn100  100% 積み上げ縦棒グラフ
 StepLine  StepLine グラフ
 Stock  株価チャート
 ThreeLineBreak  ThreeLineBreak グラフ

グラフを作成するには、最初にグラフの系列を作成します。

グラフの系列はSeriesコレクションを使用します。プロパティウィンドウでは下図の場所になります。

Seriesコレクション欄の[…]ボタンをクリックすると「Seriesコレクションエディター」が表示されるので[追加]ボタンをクリックしてSeriesを1つ追加します。

このSeriesが1つのグラフを表します。

次に、ChartTypeプロパティでグラフの種類(表1参照)を設定します。ここではColumnを選択して棒グラフとします。

凡例はNameプロパティで設定します。

データはPointプロパティで追加します。Pointプロパティ欄に表示される[…]ボタンをクリックして「DataPointコレクションエディター」を表示させます。

必要なデータ(バー)の分だけ[追加]ボタンをクリックしてデータを追加します。

データの値はXValue, YValueプロパティで設定します。

縦棒グラフの場合はXValueがX軸を表し、YValueがバーの高さを表します。

例えば3つのバーを追加し、(XValue=1, YValue=20),(XValue=2, YValue=30),(XValue=3,YValue=50)とした場合のグラフは下図のようになります。

今回はここまでとし、次回軸の設定について取り上げたいと思います。