SparrowChart で軸をカスタマイズ

Tech
Share

この記事では SparrowChart で軸をカスタマイズする記述を紹介します。

説明には Flexible と書いてはありますが、軸に関してはそこまで設定項目は多くないようです。

サンプルプログラムの実行結果 サンプルプログラムの実行結果

このサンプルでは Converter を使っているので C# のコードを使っていますが、カスタマイズ自体は XAML のみでできます。ソースコード等はこちらから

MainWindow.xaml
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<sc:SparrowChart.XAxis>
    <sc:LinearXAxis Interval="1" MaxValue="10" MinValue="1" MajorTicksPosition="Outside" LabelAngle="10">
        <sc:LinearXAxis.LabelTemplate>
            <DataTemplate>
                <Canvas>
                    <Ellipse Fill="Navy" Height="16" Width="16" />
                    <TextBlock Text="{Binding Converter={StaticResource ResourceKey=RomanConverter}}" Foreground="LightGray" Margin="1" />
                </Canvas>
            </DataTemplate>
        </sc:LinearXAxis.LabelTemplate>
    </sc:LinearXAxis>
</sc:SparrowChart.XAxis>
<sc:SparrowChart.YAxis>
    <sc:LinearYAxis Interval="1" MaxValue="4" MinValue="-1" MajorTicksPosition="Inside" Header="総売り上げ" ShowCrossLines="False" />
</sc:SparrowChart.YAxis>

軸の部分のコードだけ載せています。属性の名前はその通りなのですが、 Header は軸名、 Label は目盛数字を指すようです。 また、 MajorTicksPosition は目盛の線のことです。下の図のように Excel の「目盛の種類」に当たるものです。「なし」としたいときは、 MajorLineSize を 0 とすることで再現できます。

Excel 2016 での設定項目 Excel 2016 での設定項目

目盛数字のカスタマイズとして、 Template を使う方法も載せました。 Template については通常の XAML の場合と変わらないので、説明は省略します。なお、 RomanConverter はローマ数字に変換する自作の Converter です。