Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

データをグラフ表示するWPFアプリケーションを作る

ComponentOne Studio Enterprise 2008J(SP2)のChart for WPFコンポーネントで華麗なグラフを表示(その1)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/09/29 15:30

 ComponentOne Studio Enterprise 2008J(SP2)のChart for WPFコンポーネントは、Windowsの新しいサブシステムである、WPF(Windows Presentation Foundation )に対応したチャートコントロールで、多彩なグラフを簡単に作成できるコンポーネントです。このコンポーネントを利用すると、WPF特有の高度なレンダリングとアニメーション機能を持った、とても綺麗なグラフを作成することができます。今回は、プログラム実行時にチェックボックスをクリックするだけで、グラフの表示を2D-3D表示に切り替え、それぞれグラフのスケール変更と回転をマウスで行えるWPFアプリケーションを作成してみました。

はじめに

 データをグラフ化して分かりやすくするのは、資料作成やプレゼンテーションの常識になっていますが、凝ったグラフを作るとなると結構大変です。しかも、このグラフ機能を独自のアプリケーションに実装させるとなると、グラフィックス処理を多用することになり、その知識も必要になります。

 ComponentOne Studio Enterprise 2008J(SP2)のChart for WPFコンポーネントは、Windowsの新しいサブシステムである、WPF(Windows Presentation Foundation )に対応したチャートコントロールで、多彩なグラフを簡単に作成できるコンポーネントです。このコンポーネントを利用すると、WPF特有の高度なレンダリングとアニメーション機能を持った、とても綺麗なグラフを作成できます。

 今回は、プログラム実行時にチェックボックスをクリックするだけで、グラフの表示を2Dから3Dに切り替え、それぞれグラフのスケール変更と回転をマウスで行えるWPFアプリケーションを作成してみました。

WPFアプリケーションでグラフを表示する
WPFアプリケーションでグラフを表示する
瞬時にグラフのタイプを3Dに変更し、マウスで視点を回転させることができる
瞬時にグラフのタイプを3Dに変更し、マウスで回転させることができる

対象読者

 Visual Basic/Visual C# 2008を使ってプログラムを作ったことのある人

必要な環境

 Visual Basic 2008、Visual C# 2008、Visual Studio 2008でプログラムが作れる環境。なお、本プログラムはWindows Vista上で動作するVisual Studio 2008を使用して作成し、動作確認を行っています。

プログラム実行時の注意事項

 Chart for WPFを使って作成したアプリケーションを配布する場合、Chart for WPFのアセンブリファイルを添付する必要があります。これは、Common Language RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。アプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。

ファイル 内容
C1.WPF.C1Chart.dll C1WPFChartコントロール

 このファイルを、プログラムを実行するフォルダに格納します。.NET Framework 3.0/3.5から追加されたクラスやメンバを使用しているので、.NET Framework 3.0/3.5以上のバージョンの.NET Frameworkがインストールされていることが必須条件です。

コンポーネントのインストール

 はじめてChart for WPFコンポーネントを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2008Jをインストールする必要があります。

 インストーラは、グレープシティのWebページからダウンロードできます。製品ページの[申込フォーム]をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 ComponentOne Studio Enterprise 2008Jをインストールしたら、ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、「WPFコンポーネント」のアセンブリ名が「C1.WPF.C1Chart」のコンポーネント「C1Chart」です。

アセンブリ名が「C1.WPF.C1Chart」のコンポーネント「C1Chart」を選択する
アセンブリ名が「C1.WPF.C1Chart」のコンポーネント「C1Chart」を選択する

C1Chartコンポーネントについて

 Chart for WPFはWindows用のプレゼンテーションサブシステムであるWPF(Windows Presentation Foundation)に対応したチャートコントロールです。

 棒、円、折れ線、エリアといったグラフの種類に加え、3D、積層化、百分率、シンボルなど多くのチャートスタイルが用意されています。さらに、これらのグラフとスタイルを組み合わせることにより、散布図や株価チャート、ドーナツグラフ、複合グラフなども作成可能です。また、WPFのレンダリングとアニメーション効果を使うことができるので、通常のグラフ作成コンポーネントより表現力・訴求力の高いチャートを作成できます。

 データベースのデータをグラフのデータソースに使うこともできます。グラフの作成には、XAML言語とVB/C#が利用でき、これらのコードを組み合わせて記述することも可能です。

 WPFのページには、Chart for WPFコンポーネントだけでなく、WPF用のボタンやチェックボックスなどのコントロールと組み合わせて使うことができます。WPFのActionにも対応しているので、プロパティの設定だけでグラフの回転やズームなどの機能を実装できます。

 今回は、デフォルトのデータを使用して、チェックボックスでグラフの2D/3Dを切り替えて表示するとともに、2Dグラフ時はスケール移動を、3Dグラフ時はグラフの回転をマウスで操作できるアプリケーションを作成します。

使用できるチャートタイプ

 C1Chartコンポーネントでは、以下の組み込みチャートタイプを使用できます(各名称は設定値)。これらは、C1ChartコンポーネントのChartTypeプロパティに、それぞれの値を設定するだけです。

  • Bar
  • BarStacked
  • BarStacked100pc
  • Column
  • ColumnStacked
  • ColumnStacked100pc
  • Line
  • LineSmoothed
  • LineStacked
  • LineStacked100pc
  • LineSymbols
  • LineSymbolsStacked
  • LineSymbolsStacked100pc
  • LineSymbolsSmoothed
  • Area
  • AreaStacked
  • AreaStacked100pc
  • AreaSmoothed
  • Pie
  • PieExploded
  • PieDoughnut
  • PieExplodedDoughnut
  • Bar3D
  • Bar3DStacked
  • Bar3DStacked100pc
  • Column3D
  • Column3DStacked
  • Column3DStacked100pc
  • Area3D
  • Area3DStacked
  • Area3DStacked100pc
  • Area3DSmoothed
  • Pie3D
  • Pie3DExploded
  • Pie3DDoughnut
  • Pie3DExplodedDoughnut
使用例:3D分割円グラフ(Pie3DExploded)
使用例:3D分割円グラフ(Pie3DExploded)

GUIのデザイン

 Visual Studio(VB、C#)を起動したら、[新しいプロジェクト]で[WPFアプリケーション]を選びます。

[WPFアプリケーション]を選択
[WPFアプリケーション]を選択

 そして、ツールボックスから[C1Chart]を選び、「Window1.xaml」にドラッグ&ドロップし、サイズを調整します。

 C1Chartコンポーネントは、デフォルトでデータと凡例名があらかじめ設定され、2Dの「Column」タイプのグラフが表示されます。それぞれのデータラベルとデータは、Visual StudioのIDEに、次のXAMLコードで表示されています。

<c1chart:ChartData.ItemNames>P1 P2 P3 P4 P5</c1chart:ChartData.ItemNames>
<c1chart:DataSeries Label="Series 1" Values="20 22 19 24 25"  SymbolFill="Bisque"/>
<c1chart:DataSeries Label="Series 2" Values="8 12 10 12 15" SymbolFill="DarkBlue" />
デフォルトのグラフとXAMLコード
デフォルトのグラフとXAMLコード

グラフの各要素の設定

 最初に、C1Chartコンポーネントのデザインをしましょう。Childlenコレクションエディタを使用すると、グラフの個々の要素を変更できます。

バーの色の設定

 チャートのバーの色を変更するには、プロパティウィンドウを使用します。

 個々のチャートの構成は、「Data」プロパティを展開し、「Children」プロパティの値欄をクリックします。コレクションエディタが表示されるので、それぞれの「DataSeries」オブジェクトのプロパティを設定します。

「Children」コレクションエディタで「DataSeries」オブジェクトのプロパティを設定する
「Children」コレクションエディタで「DataSeries」オブジェクトのプロパティを設定する

 バーの色は「SymbolFill」プロパティで設定します。値欄をクリックすると、設定色がリスト表示されるので、ここから選びます。自動的に、チャートの色も変更されます。このコレクションエディタでは、凡例の文字(Labelプロパティ)や折れ線グラフのデータ点を表すマークの形状(Symbolプロパティ)などを設定できます。

バーの色は「SymbolFill」プロパティで設定
バーの色は「SymbolFill」プロパティで設定

パレットを使った設定

 C1Chartコンポーネントの「Palette」プロパティを使うと、さまざまなテーマカラーをチャートに設定できます。値欄をクリックすると、パレットの候補がリスト表示されるので、ここから選択するだけでいろいろなパターンのカラーを設定できます。

「Palette」プロパティで設定できる
「Palette」プロパティで設定できる

グラフのタイトルの設定

 今度は、グラフのタイトルを作成します。これは、<TextBlock>タグを用いて設定できます。

<TextBlock FontSize="20 Height="349" Width="457"> 売り上げグラフ
</TextBlock>

 ここでは、さらに影を付けるエフェクトをかけるために、「DropShadowBitmapEffect」を作成し、タイトルに設定します。

 <Window.Resources>ブロックを作成してそこに影の設定を記述し、<TextBlock>タグのパラメータ「BitmapEffect」にこの設定を指定します。

<Window.Resources>
    <DropShadowBitmapEffect x:Key="shadow" Color="Black" Direction="-45" ShadowDepth="3" Softness="0.5"  Opacity="0.5"/>
</Window.Resources>
<Grid Height="423" Name="Grid1" Width="525">
    <TextBlock FontSize="20
           " BitmapEffect="{StaticResource shadow}" Height="349" Width="457"> 売り上げグラフ
    </TextBlock>

背景色のグラデーション設定 -Application.xamlでの汎用スタイルの作成

 今度は、チャート全体の背景にグラデーションを設定してみましょう。これは、XAMLの<Style>タグでグラデーションを作成し、<Border>タグで指定します。

 グラデーションの作成は、<Style>タグで行います。まず、チャートの枠線(Border)を作成し、その背景色をグラデーションにします。ここでは、「PaleVioletRed」をグラデーションの開始色に設定し、終了色を「透明(Transparent)」に設定して、右下から左上に向かう斜めのグラデーションにします。

 このBorderとグラデーションの作成スタイルを、Application.xamlに作成しておくと、どのWPFページからも呼び出して使用できます。

Application.xamlのxamlコード
<Application x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>
        <Style x:Key="chart_border" TargetType="{x:Type Border}">
            <Setter Property="BorderBrush" Value="PaleVioletRed"/>
            <Setter Property="CornerRadius" Value="5"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Margin" Value="2"/>
            <Setter Property="Padding" Value="2"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush Opacity="0.25" StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="Transparent" Offset="0"/>
                        <GradientStop Color="PaleVioletRed" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

 作成したスタイルは、<Grid>タグの中に設定します。また、C1Chartコンポーネントの「BackGround」プロパティを「Transparent」にします。これで、チャートの周りに枠線が設定され、背景がグラデーションになります。

<Grid>
    <Border Style="{StaticResource chart_border}" Margin="12,20,12,23">
        <TextBlock FontSize="20
               " BitmapEffect="{StaticResource shadow}" Height="349" Width="457"> 売り上げグラフ
        </TextBlock>
    </Border>
完成したタイトル文字のドロップシャドウとチャートのグラデーション
完成したタイトル文字のドロップシャドウとチャートのグラデーション

イベント処理でグラフの種類を変更する

 今度は、チェックボックスを使って、2Dと3Dにグラフの表示を切り替えられるようにします。併せて、Actionsプロパティを使って、2D表示時はスケール変更を、3D表示時は回転をマウスでできるようにします。

Actionsプロパティによるアクションの設定

 C1Chartコンポーネントの「Actions」プロパティの値欄をクリックすると、コレクションエディタが起動します。左側のペインからアクションの種類を選ぶと、右のペインにその設定項目が表示されます。

 ここでは、「ScaleAction」「Rotate3DAction」を選び、[追加]ボタンを押してこれらのアクションを追加します。すると、右のペインにこのアクションを設定するマウスボタンを選ぶ項目が表示されます。デフォルトでマウスの左ボタンになっているので、そのままOKボタンを押します。

アクション用コレクションエディタ
アクション用コレクションエディタ

チェックボックスのイベント処理

 ページにチェックボックスを配置し、クリックすることでグラフの表示を2D/3D切り替えができるようにします。

 ツールボックスからCheckBoxコントロールを、C1Chartコンポーネントの下にドラッグ&ドロップします。C1Chartコンポーネントは、選択状態にあるとマウスのドラッグでサイズを変更(実際にはGrid内のMarginの設定値を変更)できるので、CheckBoxコントロールが入るサイズにします。

 CheckBoxコントロールは、プロパティウィンドウの「Content」プロパティで表示文字を変更できるので、「3D」に変えておきます。

C1Chartコンポーネントのサイズを変更し、CheckBoxを配置する
C1Chartコンポーネントのサイズを変更し、CheckBoxを配置する

CheckBoxコントロールへのイベントハンドラの設定

 次に、このCheckBoxコントロールで、グラフの2D/3D表示を切り替えるためのイベント処理を作成します。

 まず、CheckBoxコントロールのXAMLの記述を修正し、イベントハンドラを呼び出す記述を追加します。イベントハンドラは、それぞれチェック時は「Checked」、チェックが外れると「Unchecked」という名称にします。

修正前
<CheckBox Height="16" HorizontalAlignment="Left" Margin="12,0,0,12" Name="CheckBox1" 
        VerticalAlignment="Bottom" Width="120">3D</CheckBox>
修正後
<CheckBox Height="16" HorizontalAlignment="Left" Margin="12,0,0,12" Name="CheckBox1" 
        VerticalAlignment="Bottom" Width="120" 
        Checked="Checked" Unchecked="Unchecked" >3D</CheckBox>

イベントハンドラの作成

 次に、配置したCheckBoxコントロールをクリックし、プロパティウィンドウでイベントを選んで[Checked]と[Unchecked]をダブルクリックします。自動的に「Windows1.xaml」のコードページが開き、これらのイベントハンドラが作成されます。

 ここで、C1ChartコンポーネントのChartTypeプロパティに、変更したいチャートタイプを設定します。設定値は、「Checked」では3Dの「Column3D」、「Unchecked」では2Dの「Column」になります。

 これで、CheckBoxコントロールをクリックするだけで、チャートタイプが切り替わります。

Visual Basic
Sub Checked(ByVal sender As Object, ByVal args As RoutedEventArgs)
    Me.C1Chart1.ChartType = C1.WPF.C1Chart.ChartType.Column3D
End Sub

Sub Unchecked(ByVal sender As Object, ByVal args As RoutedEventArgs)
    Me.C1Chart1.ChartType = C1.WPF.C1Chart.ChartType.Column
End Sub
C#
private void Checked(object sender, RoutedEventArgs e)
{
    c1Chart1.ChartType = C1.WPF.C1Chart.ChartType.Column3D;
}

private void Unchecked(object sender, RoutedEventArgs e)
{
    c1Chart1.ChartType = C1.WPF.C1Chart.ChartType.Column;
}
Windows1.xamlコード全文
<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="512" Width="626" xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart">

    <Window.Resources>
        <DropShadowBitmapEffect x:Key="shadow" Color="Black" Direction="-45" ShadowDepth="3" Softness="0.5"  Opacity="0.5"/>
    </Window.Resources>

    <Grid>
        <Border Style="{StaticResource chart_border}" Margin="12,20,12,42">
            <TextBlock FontSize="20
                       " BitmapEffect="{StaticResource shadow}" Height="349" Width="457"> 売り上げグラフ
            </TextBlock>
        </Border>
        
        <c1chart:C1Chart Margin="37,67,73.5,86" Name="C1Chart1" Palette="Metro" Background="Transparent">
            <c1chart:C1Chart.Actions>
                <c1chart:ScaleAction Modifiers="" MouseButton="Left" />
                <c1chart:Rotate3DAction Modifiers="" MouseButton="Left" />
            </c1chart:C1Chart.Actions>
            <c1chart:C1Chart.Data>
                <c1chart:ChartData>
                    <c1chart:ChartData.ItemNames>P1 P2 P3 P4 P5</c1chart:ChartData.ItemNames>
                    <c1chart:DataSeries Label="Series 1" Values="20 22 19 24 25" SymbolFill="CadetBlue" />
                    <c1chart:DataSeries Label="Series 2" Values="8 12 10 12 15" SymbolFill="Crimson" />
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            <c1chart:C1ChartLegend DockPanel.Dock="Right" />
        </c1chart:C1Chart>
        <CheckBox Height="16" HorizontalAlignment="Left" Margin="12,0,0,12" Name="CheckBox1" 
                  VerticalAlignment="Bottom" Width="120" 
                  Checked="Checked" Unchecked="Unchecked" >3D</CheckBox>
    </Grid>
</Window>

まとめ

 C1Chartコンポーネントを使ったグラフは、これまでのグラフにはない高い視覚効果を生み出せます。多少WPFとXAML言語の知識が必要になりますが、新しい言語を1から覚えることに比べれば、大したことはありません。それ以上に、多くのメリットを得られますし、C1Chartコンポーネントの使い方も難しくありません。

 グラフを使ったアプリケーション開発を企画・開発しているのであれば、このコンポーネントの導入も検討してみてはいかがでしょうか。

製品情報

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

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

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