CodeZine(コードジン)

特集ページ一覧

入力したデータがリアルタイムに反映されるバブルチャートを実装する

「PowerTools ComponentOne Studio 2012J」のC1Chart2D/C1FlexGridコントロールを使った.NETアプリケーションの作成

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/10/19 10:20
目次

グラフの設定処理

 グリッドのデータを取得したら、バブルチャートを更新します。

 (1)まず、グリッドの列ラベルを取得し、これをチャートのXY軸ラベルに設定します。列ラベルは、C1FlexGridコントロールのColオブジェクトにあるCaptionプロパティに設定されていますので、これを取得してC1Chartコントロールの「AxisX」「AxisY」クラスのTextプロパティに設定します。

 (2)チャートのデータをグリッドのデータに入れ替えます。チャートのデータはチャート作成時にダミーのデータを入れてありますので、これを配列のデータに置き換えます。

 チャートのデータは、「C1Chart-ChartGroups-ChartGroupsCollection-ChartData-SeriesList-X」というクラス階層の最後のクラス「X」「Y」「Y1」クラスにあります。このクラスはデータ配列オブジェクト(ChartDataArrayオブジェクト)になっており、この配列にデータが格納されています。データを入れ替えるには、このクラスのCopyDataInメソッドを使用します。このメソッドは、引数に指定した配列データを、各クラスのデータ配列に読み込みます。

 (3)チャートデータを設定したら、シンボルのバブルを見やすいように変更します。これらは、ChartSymbolStyleクラスのメンバプロパティを使用し、枠線の色とサイズ、塗りつぶしの色を変更します。

 (4)バブルチャートはXY軸にデータのラベルを使用しますので、単純なXYチャートに比べてバブル一つ一つがどのデータを指しているのかが分かりません。そこで、データ名をラベルにしてチャート内に表示します。表示場所は各データ点の横にします。

ただし、グラフ作成を繰り返すと、それまでのラベルが残ったまま次のラベルを作成することになりますので、一度コレクションからラベルを削除します。
これは、LabelsCollectionコレクションオブジェクトのRemoveAllメソッドを使用します。
まず、LabelsCollectionコレクションオブジェクトのCountプロパティですでにラベルががるかどうかを調べ、ラベルがあればRemoveAllメソッドですべてのラベルを削除します。そして、新しいラベルを作成します。
チャートにラベルを組み込むにはLabelオブジェクトを作成し、各プロパティを操作してラベルに仕上げます。ラベルの作成は、LabelsCollectionコレクションにAddNewLabelメソッドを使ってLabelオブジェクトを追加する方法をとります。 そして、次のプロパティを操作しラベルに仕上げます。

Text

 ラベルに表示する文字列です。ここでは、グリッドの「データ名」列のデータを取出しラベルで表示します。

Compass

 ラベルを表示する位置を指定します。設定値はLabelCompassEnum列挙体のメンバで、以下の値が使用できます。ここでは、「East」を指定し、データ点の右横に表示するようにします。

LabelCompassEnum列挙体のメンバ
メンバ名 説明
North 0 ラベルを北(上側)に配置します。
NorthEast 1 ラベルを北東(右上側)に配置します。
East 2 ラベルを東(右側)に配置します。
SouthEast 3 ラベルを南東(右下側)に配置します。
South 4 ラベルを南(下側)に配置します。
SouthWest 5 ラベルを南西(左下側)に配置します。
West 6 ラベルを西(左側)に配置します。
NorthWest 7 ラベルを北西(左上側)に配置します。
Radial 8 円グラフで、ラベルをグラフの中心から外側に放射状に配置します。
Orthogonal 9 ラベルをグラフの図形線から垂直方向に配置します。
Auto 10 ラベルを自動配置します。自動配置の引数は、ChartLabelsクラスのAutoArrangmentプロパティで指定します。
ラベルの表示位置(ヘルプより抜粋)
ラベルの表示位置(ヘルプより抜粋)
AttachMethod

 ラベルを配置する位置をどのように指定するのかを、AttachMethodEnum列挙体のメンバで指定します。以下の値が使用できます。ここでは、データ点をラベルの表示位置としますので、「DataIndex」を指定します。

AttachMethodEnum列挙体のメンバ
メンバ名 説明
Coordinate 0 指定したピクセル座標にラベルを添付します。
DataCoordinate 1 指定したデータ座標にラベルを添付します。
DataIndex 2 指定したデータインデックスにラベルを添付します。
AttachMethodData、SeriesIndex、PointIndex

 グラフグループ、データセット、データポイントインデックスを指定します。ここでは、グラフグループ、データセットは1つしかありませんので、インデックスは「0」を指定し、データポイントは7つのデータそれぞれを指定できるようにForループの変数「i」を設定しておきます。

Style.BackColor

 ラベルの背景色を設定します。ここでは、透明にしておきます。

Visible

 ラベルを表示するかどうかを設定します。このプロパティを「True」に設定しておかないとラベルは表示されません。

 
Visual Basic
    '----------------------- グラフの設定 ----------------------------------------------------
    ' (1)軸ラベルの作成
    C1Chart1.ChartArea.AxisX.Text = C1FlexGrid1.Cols(2).Caption
    C1Chart1.ChartArea.AxisY.Text = C1FlexGrid1.Cols(3).Caption

    ' (2)グラフデータのセット
    C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).X.CopyDataIn(xp)
    C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).Y.CopyDataIn(yp)
    C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).Y1.CopyDataIn(vol)

    ' (3)シンボルの描画設定
    C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).SymbolStyle.Color = Color.AliceBlue
    C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).SymbolStyle.OutlineColor = Color.LightGreen
    C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).SymbolStyle.OutlineWidth = 3

    ' (4)ラベルの作成
   ' 一度ラベルを削除
     If C1Chart1.ChartLabels.LabelsCollection.Count > 0 Then
        C1Chart1.ChartLabels.LabelsCollection.RemoveAll()
    End If    
    Dim lab As C1.Win.C1Chart.Label
    For i = 0 To 6
        lab = C1Chart1.ChartLabels.LabelsCollection.AddNewLabel()
        lab.Text = C1FlexGrid1.GetDataDisplay(i + 1, 1)
        lab.Compass = LabelCompassEnum.East
        lab.AttachMethod = AttachMethodEnum.DataIndex
        lab.AttachMethodData.GroupIndex = 0
        lab.AttachMethodData.SeriesIndex = 0
        lab.AttachMethodData.PointIndex = i
        lab.Style.BackColor = Color.Transparent
        lab.Visible = True
    Next
End Sub
C#
    //----------------------- グラフの設定 ----------------------------------------------------
    // (1)軸ラベルの作成
    c1Chart1.ChartArea.AxisX.Text = c1FlexGrid1.Cols[2].Caption;
    c1Chart1.ChartArea.AxisY.Text = c1FlexGrid1.Cols[3].Caption;

    // (2)グラフデータのセット
    c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].X.CopyDataIn(xp);
    c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].Y.CopyDataIn(yp);
    c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].Y1.CopyDataIn(vol);

    // (3)シンボルの描画設定
    c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].SymbolStyle.Color = Color.AliceBlue;
    c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].SymbolStyle.OutlineColor = Color.LightGreen;
    c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].SymbolStyle.OutlineWidth = 3;

    // (4)ラベルの作成
    // 一度ラベルを削除
     if (c1Chart1.ChartLabels.LabelsCollection.Count > 0)
     {
         c1Chart1.ChartLabels.LabelsCollection.RemoveAll();
     }
    C1.Win.C1Chart.Label lab ;
    for (i = 0; i <= 6; i++)
    {
        lab = c1Chart1.ChartLabels.LabelsCollection.AddNewLabel();
        lab.Text = c1FlexGrid1.GetDataDisplay(i + 1, 1);
        lab.Compass = LabelCompassEnum.East;
        lab.AttachMethod = AttachMethodEnum.DataIndex;
        lab.AttachMethodData.GroupIndex = 0;
        lab.AttachMethodData.SeriesIndex = 0;
        lab.AttachMethodData.PointIndex = i;
        lab.Style.BackColor = Color.Transparent;
        lab.Visible = true;
    }
}

グラフ表示の範囲設定

 チャートにデータを設定すると、デフォルトではチャートで表示する範囲の最大値・最小値を自動的に作成します。

 通常のXYチャートであればそれで構わないのですが、バブルチャートではバブルの大きさも表示されますので、データの最大値・最小値がチャート表示の最大値・最小値になってしまうと、バブルが半分かけてしまうなどの不具合が出てしまいます。そこで、バブルがちゃんと全部表示できるように、チャート表示の最大値・最小値を設定できるようにします。

 チャート表示の最大値・最小値は、それぞれのデータ軸の「Max」「Min」プロパティで設定します。その際、「AutoMax」「AutoMin」プロパティをFalseに設定し、自動設定を解除しておきます。そして、TextBoxコントロールに入力されている値を、それぞれのデータ軸の「Max」「Min」プロパティに代入します。

Visual Basic
'----------------------- グラフ表示の範囲設定 ----------------------------------------------------
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    If TextBox1.Text <> "" Then
        C1Chart1.ChartArea.AxisX.AutoMax = False
        C1Chart1.ChartArea.AxisX.Max = TextBox1.Text
    End If

    If TextBox2.Text <> "" Then
        C1Chart1.ChartArea.AxisX.AutoMin = False
        C1Chart1.ChartArea.AxisX.Min = TextBox2.Text
    End If

    If TextBox3.Text <> "" Then
        C1Chart1.ChartArea.AxisY.AutoMax = False
        C1Chart1.ChartArea.AxisY.Max = TextBox3.Text
    End If

    If TextBox4.Text <> "" Then
        C1Chart1.ChartArea.AxisY.AutoMin = False
        C1Chart1.ChartArea.AxisY.Min = TextBox4.Text
    End If

End Sub
C#
//----------------------- グラフ表示の範囲設定 ----------------------------------------------------
private void button1_Click(object sender, EventArgs e)
{
    if(textBox1.Text != "")
    {
        c1Chart1.ChartArea.AxisX.AutoMax = false;
        c1Chart1.ChartArea.AxisX.Max = Convert.ToDouble(textBox1.Text);
    }

    if(textBox2.Text !="") 
    {
        c1Chart1.ChartArea.AxisX.AutoMin = false;
        c1Chart1.ChartArea.AxisX.Min = Convert.ToDouble(textBox2.Text);
    }

    if(textBox3.Text !="") 
    {
        c1Chart1.ChartArea.AxisY.AutoMax = false;
        c1Chart1.ChartArea.AxisY.Max = Convert.ToDouble(textBox3.Text);
    }

    if(textBox4.Text !="") 
    {
        c1Chart1.ChartArea.AxisY.AutoMin = false;
        c1Chart1.ChartArea.AxisY.Min = Convert.ToDouble(textBox4.Text);
    }
}

グラフの保存

 最後に、作成したグラフを保存する処理を作成します。

 C1Chartコントロールは、グラフをビットマップ形式の画像に保存できますので、作成したバブルチャートを他のアプリケーションで使用できるように画像に保存します。この処理は、SaveImageメソッドを使用します。引数に、保存するファイル名と画像フォーマットを指定しメソッドを実行します。

 ファイル名の取得には、SaveFileDialogコントロールを使用します。

Visual Basic
'----------------------- グラフの保存 ----------------------------------------------------
Private Sub Button3_Click(sender As System.Object, e As System.EventArgs) Handles Button3.Click
    Dim fname As String
    If SaveFileDialog1.ShowDialog() = Windows.Forms.DialogResult.OK Then
        fname = SaveFileDialog1.FileName
        C1Chart1.SaveImage(fname, System.Drawing.Imaging.ImageFormat.Bmp)
    End If
End Sub
C#
//----------------------- グラフの保存 ----------------------------------------------------
private void button3_Click(object sender, EventArgs e)
{
    string fname;
    if(saveFileDialog1.ShowDialog() == System.Windows.Forms.DialogResult.OK)
    {
        fname = saveFileDialog1.FileName;
        c1Chart1.SaveImage(fname, System.Drawing.Imaging.ImageFormat.Bmp);
    }
}

 これで出来上がりです。

まとめ

 C1Chartコントロールは、多彩な表現力を持ったグラフコントロールで、データを視覚化するには大いに威力を発揮するコントロールです。C1FlexGridコントロールは、行列形式の入力インターフェースを作るのにもってこいのコントロールで、グリッドのデータにアクセスする方法もとても簡単です。

 記事のボリュームの関係で、C1Chart、C1FlexGridコントロールの一部の機能しか紹介できませんでしたが、それぞれのコントロールがどのような機能を持っているのかはお分かりいただけたと思います。

 C1Chart、C1FlexGridコントロールともに、多彩な機能と大変細かい操作ができるコントロールなので、もっといろいろな操作機能を組み込んだアプリケーションに仕上げることができます。



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5