CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/09/21 14:00
目次

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

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

 マウスポインタをチャートのシンボルに重ねると、シンボルの輪郭線の色と太さが変わるようにします。まず、シンボルの外枠線を変えるスタイルを作成します。そして、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コードとプロパティウィンドウの操作だけで作成できます。

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

参考文献



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

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

あなたにオススメ

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