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

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

マウスイベントに応答する処理を組み込む

　せっかくなので、インタラクティブ機能を組み込んでみます。

　マウスポインタをチャートのシンボルに重ねると、シンボルの輪郭線の色と太さが変わるようにします。まず、シンボルの外枠線を変えるスタイルを作成します。そして、Triggersプロパティでトリガーとなるイベントを指定し、対象のプロパティの値を設定します。

　操作するのは、C1ChartコントロールのPlotElementクラスの各プロパティです。「Stroke」は図形の輪郭を描画するBrushオブジェクトを、「StrokeThickness」は輪郭の幅をあらわすプロパティです。ここでは、最高気温と最低気温の折れ線グラフを、それぞれ違う輪郭で表示するようにしています。

<Window.Resources>
    <Style x:Key="mouseOver" TargetType="{x:Type c1chart:PlotElement}">
        <!-- デフォルトのアウトライン -->
        <Setter Property="Stroke" Value="RoyalBlue" />
        <Style.Triggers>
            <!-- 要素上にマウスを置くと太いアウトラインに変わる  -->
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Stroke" Value="Yellow" />
                <Setter Property="StrokeThickness" Value="2" />
            </Trigger>
        </Style.Triggers>
    </Style>
    
    <Style x:Key="mouseOver2" TargetType="{x:Type c1chart:PlotElement}">
        <!-- デフォルトのアウトライン -->
        <Setter Property="Stroke" Value="Salmon" />
        <Style.Triggers>
            <!-- 要素上にマウスを置くと太いアウトラインに変わる  -->
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Stroke" Value="Lime" />
                <Setter Property="StrokeThickness" Value="2" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

　スタイルができたら、このスタイルを呼び出す処理を作成します。それぞれの折れ線グラフをあらわす「DataSeries」要素の中で、SymbolStyleプロパティにこのStyleを設定します。

<c1chart:DataSeries Values="27.4 28.2 28.1 27.2 27.7 27.4 27.4 27.5 28.7 22.0" AxisX="気温（℃）" 
                    AxisY="東京 8月" Label="最低気温" SymbolMarker="Star8" 
                    SymbolStyle="{StaticResource mouseOver}"/>
<c1chart:DataSeries Values="34.6 35.2 35.1 34.5 33.6 33.2 33.6 33.8 36.1 30.9" AxisX="気温（℃）" 
                    AxisY="東京 8月" Label="最高気温"  SymbolStyle="{StaticResource mouseOver2}"/>

　最後に、グラフのタイトルをTextBlockで作成し、C1Chartコントロールに重ねてできあがりです。

XAML全文

<Window x:Class="WPF_C1Chart_cs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart"
        Title="Window1" Height="610" Width="869" FontSize="16" >

    <Window.Resources>
        <Style x:Key="mouseOver" TargetType="{x:Type c1chart:PlotElement}">
            <!-- デフォルトのアウトライン -->
            <Setter Property="Stroke" Value="RoyalBlue" />
            <Style.Triggers>
                <!-- 要素上にマウスを置くと太いアウトラインに変わる  -->
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Stroke" Value="Yellow" />
                    <Setter Property="StrokeThickness" Value="2" />
                </Trigger>
            </Style.Triggers>
        </Style>
        
        <Style x:Key="mouseOver2" TargetType="{x:Type c1chart:PlotElement}">
            <!-- デフォルトのアウトライン -->
            <Setter Property="Stroke" Value="Salmon" />

            <Style.Triggers>
                <!-- 要素上にマウスを置くと太いアウトラインに変わる  -->
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Stroke" Value="Lime" />
                    <Setter Property="StrokeThickness" Value="2" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    
    <Grid>
        <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">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData ItemNames="10日 11日 12日 13日 14日 15日 16日 17日 18日 19日">

                    <c1chart:DataSeries Values="27.4 28.2 28.1 27.2 27.7 27.4 27.4 27.5 28.7 22.0" AxisX="気温（℃）" 
                                        AxisY="東京 8月" Label="最低気温" SymbolMarker="Star8" 
                                         SymbolStyle="{StaticResource mouseOver}"/>
                    <c1chart:DataSeries Values="34.6 35.2 35.1 34.5 33.6 33.2 33.6 33.8 36.1 30.9" AxisX="気温（℃）" 
                                        AxisY="東京 8月" Label="最高気温"  SymbolStyle="{StaticResource mouseOver2}"/>
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            <c1chart:C1ChartLegend DockPanel.Dock="Right" />
            <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>
        </c1chart:C1Chart>

        <TextBlock Height="23" HorizontalAlignment="Left" Margin="300,41,0,0" Name="TextBlock1" Text="東京 8月の気温"
                   Foreground="MediumVioletRed"  VerticalAlignment="Top" Width="161" TextAlignment="Center" />
    </Grid>
</Window>

まとめ

　C1Chartコントロールは、このように訴求力のあるグラフを、XAMLコードとプロパティウィンドウの操作だけで作成できます。

　グラフの種類や装飾機能が豊富で、ユーザーの操作に応答した表現も可能なため、プレゼンテーション用グラフアプリケーションの作成などにはうってつけのコンポーネントと言えます。

参考文献

• Microsoft MSDNライブラリ Windows Presentation Foundation
• 気象庁・気象統計情報 過去の気象データ検索