チャートを画像で保存する
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の知識が必要になりますが、視覚効果やアニメーションなどの優れた表現能力を使うことができます。
参考文献
- MSDNライブラリ「Windows Presentation Foundation」（このURLは変更される可能性があります）
製品情報
