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

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

スクロールバーの設定

　作成したグラフは、31日分のデータが一度に表示されています。全体の傾向を一度に見るにはこれでもかまいませんが、日にちのラベルが重なったりして見づらいので、チャートのサイズを大きくしスクロールして見ることができるようにします。

　チャートをスクロールできるようにするには、スクロールバーを使用します。

　まず、Viewクラスを使用して、チャートのX軸の表示スケールを大きくします。グラフの各要素は、図のようにそれぞれオブジェクト（クラス）になっています。

グラフの各要素とクラスのプロパティ（ヘルプファイルより抜粋）

　この中で、横軸（X軸）のビューを担当しているのが「c1chart:ChartView.AxisX」クラスです。この下層の「Axis」クラスの「Scale」プロパティを使用すると、X軸の表示サイズを変えることができます。設定値は表示倍率で、数字が小さいほど表示範囲が狭くなり、ズーム表示をしたのと同じ結果になります。ここでは「0.3」を設定します。

　また、併せて「Title」プロパティにTextBlockコントロールを配置し、X軸のタイトルも設定しておきます。コードは<c1chart:C1ChartLegend>タグの下に記述します。

<c1chart:C1ChartLegend DockPanel.Dock="Right" />

<c1chart:C1Chart.View>
    <c1chart:ChartView>
        <c1chart:ChartView.AxisX>
            <c1chart:Axis Scale="0.3">
               <c1chart:Axis.Title>
                    <TextBlock Text="8月" TextAlignment="Center" Foreground="Crimson"/>
                </c1chart:Axis.Title>
            </c1chart:Axis>
        </c1chart:ChartView.AxisX>
    </c1chart:ChartView>
</c1chart:C1Chart.View>

表示範囲が狭くなり、チャートが拡大表示になる

　続いて、スクロールバーを作成します。<c1chart:C1ChartLegend>タグの下に、次のコードを記述します。

<c1chart:C1ChartLegend DockPanel.Dock="Right" />
<ScrollBar Name="Scroll1" DockPanel.Dock="Bottom" Minimum="0" Maximum="1"
    SmallChange="0.01" LargeChange="0.1" Orientation="Horizontal" ViewportSize="0.1"
    Value="{Binding ElementName=c1Chart1, Path=View.AxisX.Value}"
            Height="21" Width="458" />  

• DockPanel.Dockプロパティ：スクロールバーの表示位置を指定
• Minimum、Maximumプロパティ：スクロールバーの動作範囲を指定
• SmallChange、LargeChangeプロパティ：ボタンやスライダーの動作量を指定
• Orientationプロパティ：スクロールバーの方向を指定
• ViewportSizeプロパティ：スクロール量のレートを設定
• Valueプロパティ：スクロールバーを連結するコントロールとビューを指定

　これらのプロパティを使用して、スクロールバーの動作や外観などを設定します。特に、ElementNameに設定するC1Chartコントロールの名前の、大文字小文字に注意してください。これを間違えるとスクロールバーとC1Chartコントロールが連動しなくなります。

チャートの下側にスクロールバーが作成される

チャートの装飾

　次に、チャートを装飾します。グラフの背景と縦棒、折れ線とシンボルの色を変えます。デザイン画面でC1Chartコントロールをクリックし、プロパティウィンドウで［ブラシ］をクリックして展開します。「Background」プロパティでグラデーションブラシを選択します。

<c1chart:C1Chart Height="455" HorizontalAlignment="Left" Margin="33,43,0,0" Name="C1Chart1" 
                 VerticalAlignment="Top" Width="803" ChartType="Column">
    <c1chart:C1Chart.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFE87341" Offset="0" />
            <GradientStop Color="#FFF2E2F1" Offset="1" />
        </LinearGradientBrush>
    </c1chart:C1Chart.Background>

　XAMLコードウィンドウで最初のデータ系列をクリックします。プロパティウィンドウが「DataSeries」クラスのプロパティに入れ替わるので、［その他］をクリックして展開し、「SymbolFill」プロパティにグラデーションカラーを設定します。

<c1chart:DataSeries.SymbolFill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFA894EB" Offset="0" />
        <GradientStop Color="#FF5AAEE2" Offset="1" />
    </LinearGradientBrush>
</c1chart:DataSeries.SymbolFill>

　同様に、2番目のデータ系列から［その他］をクリックして展開し、「SymbolFill」プロパティにグラデーションカラーを設定します。これで、シンボルの色がグラデーションで塗りつぶされます。

　続いて「ConnectionFill」プロパティをクリックし、単色で塗りつぶします。これで、折れ線が塗りつぶされます。

<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}" ConnectionFill="#FF30D7A0">

カラーリングを変えたチャート