トップ > Tech > CSharp > WPF > WPF Toolkit の Chart でシンプルな線グラフを書く

WPF Toolkit の Chart でシンプルな線グラフを書く

WPF Toolkit

以下、よく忘れるので、メモ。また時間あったらまとめます。

WPF ToolkitのChart(グラフコントロール)はきれいでいいのだが、 LineSeries(線グラフ)を使うとデータ点にすべて○がついて簡単には消せない。 株価データや波形を表示させるときは線だけのほうが見やすいので、このやり方を下記に紹介しておく。

<Window.Resources>
    <!-- データポイントを表示しないようにするスタイル(↓ の SimpleLineSeriesStyleで使用) -->
    <Style x:Key="EmptyPointsStyle" TargetType="{x:Type chartingToolkit:DataPoint}">
        <Setter Property="Template" Value="{x:Null}"/>
    </Style>
    <!-- データポイントのない線だけの LineSeries(線色は BorderBrush プロパティで指定できる) -->
    <Style x:Key="SimpleLineSeriesStyle" TargetType="{x:Type chartingToolkit:LineSeries}">
        <Setter Property="DataPointStyle" Value="{StaticResource EmptyPointsStyle}"/>
        <Setter Property="PolylineStyle">
            <Setter.Value>
                <Style TargetType="{x:Type Polyline}">
                    <Setter Property="StrokeThickness" Value="1"/>
                    <Setter Property="StrokeMiterLimit" Value="1"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
                    <Canvas x:Name="PlotArea">
                        <Polyline Stroke="{TemplateBinding BorderBrush}" Style="{TemplateBinding PolylineStyle}" Points="{TemplateBinding Points}"/>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<chartingToolkit:Chart Name="chart" Grid.Row="1" Grid.Column="1">
    <chartingToolkit:Chart.Resources>
        <chartingToolkit:LinearAxis Title="基準価額" Orientation="Y" Location="Left" x:Key="yAxis1" Name="yAxis1" />
        <chartingToolkit:LinearAxis Title="純資産総額" Orientation="Y" Location="Right" x:Key="yAxis2" Name="yAxis2" Minimum="0"/>
    </chartingToolkit:Chart.Resources>
    <chartingToolkit:Chart.Axes>
        <chartingToolkit:DateTimeAxis Interval="1" IntervalType="Months" Orientation="X" />
    </chartingToolkit:Chart.Axes>
    <chartingToolkit:AreaSeries
        Name="totalAssetSeries"
        Title="純資産総額"
        ItemsSource="{Binding}"
        IndependentValuePath="DateTime"
        DependentValuePath="Total"
        DependentRangeAxis="{StaticResource yAxis2}"
        DataPointStyle="{StaticResource EmptyPointsStyle}"
        />
    <chartingToolkit:LineSeries
        Name="valueSeries"
        Title="基準価額"
        ItemsSource="{Binding}"
        IndependentValuePath="DateTime"
        DependentValuePath="Value"
        BorderBrush="Red"
        DependentRangeAxis="{StaticResource yAxis1}"
        Style="{StaticResource SimpleLineSeriesStyle}"
        />
</chartingToolkit:Chart>
(2012/01/09 14:08:12)
14890
プロフィール

Kenz Yamada(山田研二)。1984年生。大阪。ちょっとずつ好きなプログラム作ってます。 好きなものはカメラと旅行。ガジェットや身の回り、ちょっとこだわります。 詳しくは Web mixi で。

Bookmark and Share