SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

WPFのビットマップ効果を使ったチャート表示アプリケーションを作る

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

チャートを画像で保存する

 C1Chartコンポーネントは、作成したチャートを画像データとして保存できます。この機能は、.NET FrameworkクラスライブラリのRenderTargetBitmapクラスを使用してビジュアルオブジェクトをビットマップに変換し、ファイルに保存します。

 この処理はxamlのコードではなく、Visual BasicまたはC#のイベントハンドラで処理を実行します。

ボタンの作成

 まずは、ページにボタンを配置します。ボタンにはBevelBitmapEffectを設定し、ページの右上に配置します。

Window1.xamlの追加コード
    <Button Height="27" HorizontalAlignment="Right" Margin="0,12,35,0" Name="Button1" 
            VerticalAlignment="Top" Width="114" Background="Coral">
        保存
        <Button.BitmapEffect>
            <BevelBitmapEffect BevelWidth="3" EdgeProfile="CurvedIn" LightAngle="320" Relief="0.4" 
                               Smoothness="0.4" />
        </Button.BitmapEffect>
   </Button>
</Grid>

イベントハンドラの処理

 配置したボタンをダブルクリックすると、Clickイベントハンドラが作成されるので、ここで画像への保存処理を作成します。

 まず、画像を保存するRenderTargetBitmapオブジェクトを作成します。コンストラクタの引数には、保存する画像サイズと解像度、保存フォーマットを指定します。フォーマットは、PixelFormatsクラスのメンバで指定しますが、Defaultを指定すると、適正なフォーマットを自動で設定してくれます。

 そして、RenderTargetBitmapクラスのRenderメソッドを実行します。このメソッドがVisualクラスのオブジェクトをレンダリングします。Visualクラスとは、WPFのUIクラスの派生元クラスで、C1Chartコンポーネントもこのクラスから派生しているので、Renderメソッドを使ってチャートを画像に保存できます。Renderメソッドの引数は1つで、ビットマップ化したいVisualオブジェクトを指定します。

 作成したビットマップは、FileStreamクラスを使ってファイルに保存します。

Visual Basic
Imports C1.WPF.C1Chart
Imports System.IO

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
        Dim bmp As New RenderTargetBitmap(600, 600, 96, 96, PixelFormats.Default)
        bmp.Render(C1Chart1)

        Dim bm_enc As New PngBitmapEncoder()
        Dim fname As New FileStream("chart.png", FileMode.Create)


        bm_enc.Frames.Add(BitmapFrame.Create(bmp))
        bm_enc.Save(fname)
        fname.Close()
        
        MessageBox.Show("保存しました。", "チャートの保存", MessageBoxButton.OK, MessageBoxImage.Information)
    End Sub
C#
using C1.WPF.C1Chart;
using System.IO;

private void Button1_Click(object sender, RoutedEventArgs e)
{
    RenderTargetBitmap bmp = new RenderTargetBitmap(600, 600, 96, 96, PixelFormats.Default);
    bmp.Render(c1Chart1);

    PngBitmapEncoder bm_enc = new PngBitmapEncoder();
    FileStream fname = new FileStream("chart.png", FileMode.Create);

    bm_enc.Frames.Add(BitmapFrame.Create(bmp));
    bm_enc.Save(fname);
    fname.Close();

    MessageBox.Show("保存しました。", "チャートの保存", MessageBoxButton.OK, MessageBoxImage.Information);
}
Windows1.xamlコード全文
<Window x:Class="wpfchart_cs.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="567" Width="714" 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 Height="504" Width="646" Background="Beige">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="210*" />
            <ColumnDefinition Width="453*" />
        </Grid.ColumnDefinitions>
        <Border Style="{StaticResource chart_border}" Margin="12,12,0,0" Height="41" HorizontalAlignment="Left" VerticalAlignment="Top" Width="271" Grid.ColumnSpan="2">
            <TextBlock FontSize="20
                       " BitmapEffect="{StaticResource shadow}" Height="25" Width="189"> 売り上げグラフ
            </TextBlock>
        </Border>

        <Border Style="{StaticResource chart_border2}" Margin="12,67,32,12" Grid.ColumnSpan="2">
        <c1chart:C1Chart Margin="37,67,73.5,87" Name="c1Chart1" Background="Transparent" Palette="Metro" Height="238" Width="405">

            <c1chart:C1Chart.BitmapEffect>
                    <BitmapEffectGroup>
                        <DropShadowBitmapEffect Color="DarkGray" Direction="-45" ShadowDepth="3" Softness="0.5" Opacity="0.5" />
                        <BevelBitmapEffect x:Name="animeBevelEffect" BevelWidth="1" EdgeProfile="CurvedIn" LightAngle="120" 
                                           Relief="0.2" Smoothness="0.4" />
                        <OuterGlowBitmapEffect GlowColor="BlueViolet" GlowSize="30" Noise="2" Opacity="0.4" />
                    </BitmapEffectGroup>
                </c1chart:C1Chart.BitmapEffect>

                <c1chart:C1Chart.Triggers>
                    <EventTrigger RoutedEvent="c1chart:C1Chart.MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                   Storyboard.TargetName="animeBevelEffect"
                                   Storyboard.TargetProperty="LightAngle"
                                   From="360" To="0" Duration="0:0:1" AutoReverse="True"
                                   />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </c1chart:C1Chart.Triggers>
            
                <c1chart:C1Chart.Actions>
                <c1chart:ScaleAction Modifiers="" MouseButton="Left" />
                <c1chart:Rotate3DAction Modifiers="" MouseButton="Left" />
            </c1chart:C1Chart.Actions>
            <c1chart:C1Chart.Data>
                <c1chart:ChartData>
                    <c1chart:ChartData.ItemNames>2001 2002 2003 2004 2005 2006 2007 2008</c1chart:ChartData.ItemNames>
                    <c1chart:DataSeries Label="営業収入" Values="266001 274889 275863 274312 272334 268632 262338 252918" 
                                            SymbolFill="CadetBlue" />
                    <c1chart:DataSeries Label="営業費用" Values="262987 262358 269332 268585 266547 265939 264409 264423" 
                                            SymbolFill="Crimson" />
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            <c1chart:C1ChartLegend DockPanel.Dock="Top" Height="48" Width="84" />
        </c1chart:C1Chart>
        </Border>

          
        <CheckBox Height="16.52" HorizontalAlignment="Left" Margin="107,28.48,0,0" Name="CheckBox1" 
                  VerticalAlignment="Top" Width="40" 
                  Checked="Checked" Unchecked="Unchecked" Grid.Column="1">3D</CheckBox>

        <Button Height="27" HorizontalAlignment="Right" Margin="0,20,50,0" Name="Button1" 
                VerticalAlignment="Top" Width="114" Background="Coral" Grid.Column="1" Click="Button1_Click">
            保存
            <Button.BitmapEffect>
                <BevelBitmapEffect BevelWidth="3" EdgeProfile="CurvedIn" LightAngle="320" Relief="0.4" 
                                   Smoothness="0.4" />
            </Button.BitmapEffect>
        </Button>
    </Grid>
</Window>

まとめ

 C1Chartコンポーネントは、WPF対応コンポーネントとして、WPFの機能を最大限生かしたチャート作成を実現するコンポーネントです。使いこなすには、WPFの知識が必要になりますが、視覚効果やアニメーションなどの優れた表現能力を使うことができます。

参考文献

製品情報

修正履歴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4537 2009/11/18 19:58

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング