Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

グラフの各要素の設定

 最初に、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>
完成したタイトル文字のドロップシャドウとチャートのグラデーション
完成したタイトル文字のドロップシャドウとチャートのグラデーション

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

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

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