スクロールバーの設定
作成したグラフは、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">
