マウスイベントに対応したグラフを持つWPFアプリケーションの作成

ComponentOne Studio Enterprise 2011JのC1Chartコントロールを使ったWPFアプリケーションの作成

ビジュアルの変更

　続いて、グラフをカスタマイズしていきます。

　まず、XAMLコードの1番目の<c1chart:DataSeries>をクリックします。プロパティウィンドウが「DataSeries」クラスのプロパティに変わるので、［その他］をクリックして展開し［SymbolMarker］プロパティの値欄をクリックします。リストが展開したら、［Star8］を選びます。これにより、最低気温のグラフのシンボルが星形に変わります。

プロパティリストから［Star8］を選ぶ

　縦軸のデータラベルが1℃おきになっているので、これを2℃単位に変え、XY軸のラベルを設定します。ここでは「ChartView」クラスのAxisクラスを使用します。X軸、Y軸それぞれに、「AxisX」「AxisY」クラスを使用し、表示するデータの範囲はMin・Maxプロパティで指定、増減値は「MajorUnit」プロパティで指定します。また、ラベルを傾ける場合は「AnnoAngle」プロパティを使用します。このグラフでは、縦軸のデータラベルを60度傾けています。軸ラベルを表示する場合は、TextBlockコントロールを使用します。

<c1chart:C1Chart.View>
    <c1chart:ChartView>
        <c1chart:ChartView.AxisY>
            <c1chart:Axis Min="21" Max="37" MajorUnit="2" AutoMin="False" AnnoFormat="00" AnnoAngle="60" >
                <c1chart:Axis.Title>
                    <TextBlock Text="気温（℃）" TextAlignment="Center" Foreground="BlueViolet" Margin="5"/>
                </c1chart:Axis.Title>
            </c1chart:Axis>
        </c1chart:ChartView.AxisY>
        <c1chart:ChartView.AxisX>
            <c1chart:Axis>
                <c1chart:Axis.Title>
                    <TextBlock Text="東京 8月" TextAlignment="Center" Foreground="BlueViolet" Margin="7"/>
                </c1chart:Axis.Title>
            </c1chart:Axis>
        </c1chart:ChartView.AxisX>
    </c1chart:ChartView>
</c1chart:C1Chart.View>

XY軸に軸ラベルを表示し、縦軸の温度を2℃ごとに表示

テーマの適用

　このままではビジュアル的にちょっと味気ないので、テーマを適用してより視覚効果を高めていきます。

　C1Chartコントロールには、あらかじめ12個の組み込みテーマが使用できるようになっています。テーマを定義するには、次のようなXAMLコードを<c1chart:C1Chart>タグに追加します。

<c1chart:C1Chart Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1chart:C1Chart, ResourceId=Office2007Black}}">

　最後の「ResourceId」がテーマを決める要素になります。これらのテーマはChart for WPFのインストールディレクトリ（デフォルトでは、<UserFolder>\Misc\Xaml\WPF\C1WPFChart）に、XAMLファイルとして置かれているので、ファイル名を「ResourceId」に指定します。

テンプレート一覧

要素	説明
ChartTypes.xaml	すべての利用可能なグラフタイプのテンプレート
default.xaml	Defaultテーマのテンプレート
DuskBlue.xaml	Dusk Blueテーマのテンプレート
DuskGreen.xaml	Dusk Greenテーマのテンプレート
generic.xaml	グラフの各種スタイルと初期スタイルのテンプレート
Grayscale.xaml	Grayscaleテーマのテンプレート
Legend.xaml	Legendのテンプレート
MediaPlayer.xaml	Media Playerテーマのテンプレート
Office2003Blue.xaml	Office 2003 Blueテーマのテンプレート
Office2003Classic.xaml	Office 2003 Classicテーマのテンプレート
Office2003Olive.xaml	Office 2007 Oliveテーマのテンプレート
Office2003Royale.xaml	Office 2003 Royalテーマのテンプレート
Office2003Silver.xaml	Office 2003 Silverテーマのテンプレート
Office2007Black.xaml	Office 2007 Blackテーマのテンプレート
Office2007Blue.xaml	Office 2007 Blueテーマのテンプレート
Office2007Silver.xaml	Office 2007 Silverテーマのテンプレート
Vista.xaml	Vistaテーマのテンプレート

　ここでは、Office 2003 Silverテーマのテンプレートを適用します。

Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1chart:C1Chart, 
      ResourceId=Office2003Silver}}" 

<c1chart:C1Chart Height="513" HorizontalAlignment="Left" Margin="34,12,0,0" Name="c1Chart1" 
                 VerticalAlignment="Top" Width="791" ChartType="LineSymbolsSmoothed"
                 Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1chart:C1Chart, 
                 ResourceId=Office2003Silver}}" >

　また、カラーパレットを変更することで、さらにテーマの配色を変えることができます。C1Chartコントロールをクリックし、プロパティウィンドウの［可視性－Pallete］の値欄をクリックすると、使用できるカラーパレット名が表示されます。試しに［Metro］を選んでみると、チャートの配色が変わります。

Office 2003 Silverテーマの配色に変更する

パレットを「Metro」に変えると配色が変わる

　C1Chartコントロールの背景色を変えると、さらにグラフのイメージが変わります。最終的には、C1Chartコントロールは次のようなコードになります。

<c1chart:C1Chart Height="513" HorizontalAlignment="Left" Margin="34,12,0,0" Name="c1Chart1" 
                 VerticalAlignment="Top" Width="791" ChartType="LineSymbolsSmoothed"
                 Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1chart:C1Chart, 
                 ResourceId=Office2003Silver}}" Palette="Metro" Background="LemonChiffon">