スクロール表示に対応する複合グラフを持ったWPFアプリケーションの作成

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

WPFアプリケーションの作成

　C1Chartコントロールについては、前回の記事『マウスイベントに対応したグラフを持つWPFアプリケーションの作成』で概要を説明しているので、今回はさっそくWPFアプリケーションを作成していきます。

GUIのデザイン

　今回作成するのは、東京電力管内のある地点での、8月の最高気温と電力消費量（1日当たり）を、縦棒グラフと折れ線グラフの複合グラフで表示するアプリケーションです。

　使用するデータが31日分もあるため、これを1つのページに収めようとすると、とても細かなグラフになってしまうので、見やすいサイズのまま横スクロールしていくグラフに仕上げます。使用するコントロールは、C1ChartコントロールとTextBlockコントロールの2つです。

コントロールのレイアウト

複合グラフの作成

　複合グラフは、各系列ごとにDataSeries.ChartTypeプロパティを設定して実現できますが、ここでは、ベースとなるグラフをC1Chartコントロールで、もう1種類のグラフをテンプレートで作成する方法を紹介します。今回の複合グラフは、1日当たりの電力消費量を縦棒グラフで、その日の最高気温を折れ線グラフで作成します。

【参考】DataSeries.ChartTypeプロパティを設定して複合グラフを作成

　ちなみに、各系列ごとにDataSeries.ChartTypeプロパティを設定する場合は、下記のように記載します。

<c1chart:DataSeries ChartType="LineSymbols"  Label="Series 1"
RenderMode="Default" Values="20 22 19 24 25" />

　まず、ページにC1Chartコントロールを配置し、グリッドとウィンドウのサイズを変えます。デフォルトではダミーのデータが設定され、チャートは縦棒グラフになっています。

<Window x:Class="WPF_MultiChart_cs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="552" Width="996"
        xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart">
    <Grid Height="510" Width="898">
        <c1chart:C1Chart Height="455" HorizontalAlignment="Left" Margin="33,43,0,0"
                           Name="c1Chart1" VerticalAlignment="Top" Width="803">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData ItemNames="P1 P2 P3 P4 P5">
                    <c1chart:DataSeries Label="Series 1" RenderMode="Default"
                                       Values="20 22 19 24 25" />
                    <c1chart:DataSeries Label="Series 2" RenderMode="Default"
                                       Values="8 12 10 12 15" />
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            <c1chart:C1ChartLegend DockPanel.Dock="Right" />
        </c1chart:C1Chart>
    </Grid>
</Window>

デフォルトではダミーデータをもとに縦棒グラフが表示される

　ダミーのデータとX軸の軸ラベルを変更します。X軸の軸ラベルは日付にし、最初のデータに消費電力量を、2番目のデータに最高気温を設定します。

<c1chart:C1Chart.Data>
    <c1chart:ChartData ItemNames="1日 2日 3日 4日 5日 6日 7日 8日 9日 10日 11日 12日 13日 14日 15日 16日 17日 18日 19日 20日 21日 22日 23日 24日 25日 26日 27日 28日 29日 30日 31日" >
 
    <!-- 最初の系列 -->
    <c1chart:DataSeries Label="日最大需要電力（100万kW）" 
                        Values="35.86 37.50 39.65 40.67 41.88 42.00 42.31 46.62 48.17 49.00 48.37 44.61 40.76 39.95 40.80 41.82 45.66 49.22 41.51 33.54 32.57 34.52 39.12 42.63 39.29 41.89 34.95 37.64 40.91 41.22 41.16" />
 
    <!-- ２番目の系列 -->
    <c1chart:DataSeries Label="最高気温（℃）" 
                        Values="27.3 29.1 29.3 31.1 31.2 32.3 34.5 33.2 33.9 34.6 35.2 35.1 34.5 33.6 33.2 33.6 33.8 36.1 30.9 25.8 23.5 22.9 30.9 32.0 29.3 31.9 27.5 29.8 29.8 31.7 30.4 " />

　データテンプレートを作成します。<Window.Resorce>要素を作成し、ここに<DataTemplate>要素を作成します。テンプレートは、シンボルとラインの2つを、<Grid>コントロールの前に作成します。<DataTemplate>はキーを設定し、ラインでは線の太さを、シンボルでは形状とサイズを作成します。

<Window.Resources>
    <!-- 折れ線グラフテンプレート－ 太線 -->
    <DataTemplate x:Key="lines">
        <c1chart:Lines StrokeThickness="10" />
    </DataTemplate>
        
    <!-- 折れ線グラフ シンボルテンプレート -->
    <DataTemplate x:Key="star">
        <c1chart:Star Size="20,20" />
    </DataTemplate>
</Window.Resources>

　作成したテンプレートをデータ系列「最高気温」に設定します。まず、「Connection」プロパティに線のテンプレートを設定し、「Symbol」プロパティにシンボルのテンプレートを設定します。これで、データ「最高気温」が折れ線グラフに変わります。

<!-- ２番目の系列 - -->
<c1chart:DataSeries Label="最高気温（℃）" 
                    Values="27.3 29.1 29.3 31.1 31.2 32.3 34.5 33.2 33.9 34.6 35.2 35.1 34.5 33.6 33.2 33.6 33.8 36.1 30.9 25.8 23.5 22.9 30.9 32.0 29.3 31.9 27.5 29.8 29.8 31.7 30.4 "
                    Connection="{StaticResource lines}"
                    Symbol="{StaticResource star}"/>

データ「最高気温」が折れ線グラフに変わる