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

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

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

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>