凡例グループは、名前が示すように、チャート系列の凡例エントリを、それらが表すデータに基づいてカテゴリ化します。そのため、似たデータを持つ複数のチャート系列を凡例内でグループにまとめて、わかりやすく示すことができます。これにより、凡例が整理され、複数の系列を使用してチャートを視覚化および分析する際に役立ちます。
FlexChart では、チャート内の系列の対応する凡例項目をグループ化するために、LegendGroup プロパティを使用します。LegendGroup プロパティに文字列値を設定することで、特定の系列または凡例項目が属するグループ名を指定できます。LegendGroup プロパティの値が同じ系列は、凡例内でグループ化されます。ただし、LegendGroup プロパティが定義されていない系列は、0 番目のグループに入ります。
LegendGroup プロパティの値は、対応する凡例項目の上にグループタイトルとして表示されます。ただし、0 番目のグループに属する凡例項目は、グループタイトルなしで表示されます。
凡例グループの配置
凡例グループは、凡例の位置に応じて自動的に相互の配置が決定されます。たとえば、凡例がチャートの上または下に配置される場合、凡例グループは横に並べられます。逆に、凡例がチャートの左または右に配置される場合、凡例グループは縦に並べられます。
凡例グループのスタイル設定
FlexChart は、凡例グループのスタイル設定と書式設定もサポートします。凡例グループのタイトルの外観は、LegendGroupHeaderStyle プロパティを指定してカスタマイズできます。
次の図に、ある企業の国ごと、四半期ごとの売上および利益をプロットする積層グラフを示します。ここでは、すばやく簡単に分析できるように、積み重ねられる系列に基づいて凡例項目をグループ化しました。この図は、凡例と凡例グループが縦方向に配置される様子と、グループタイトルの外観をカスタマイズできることも示しています。
次のコードスニペットは、これらの系列の LegendGroup プロパティを目的のグループ名に設定して、それぞれの系列の凡例をグループ化する方法を示します。また、コードスニペットは、GroupHeaderStyle プロパティを使用して、凡例グループのヘッダーのスタイルを設定する方法も示します。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Chart:C1FlexChart Name="flexChart2"
Stacking="Stacked"
ItemsSource="{Binding DataContext.Data}"
BindingX="Country">
<!--凡例項目をグループ化します-->
<Chart:Series SeriesName="Q1" Binding="SalesQ1" LegendGroup="Sales" StackingGroup="0" />
<Chart:Series SeriesName="Q1" Binding="ProfitQ1" LegendGroup="Profit" StackingGroup="1" />
<Chart:Series SeriesName="Q2" Binding="SalesQ2" LegendGroup="Sales" StackingGroup="0" />
<Chart:Series SeriesName="Q2" Binding="ProfitQ2" LegendGroup="Profit" StackingGroup="1" />
<Chart:Series SeriesName="Q3" Binding="SalesQ3" LegendGroup="Sales" StackingGroup="0" />
<Chart:Series SeriesName="Q3" Binding="ProfitQ3" LegendGroup="Profit" StackingGroup="1" />
<Chart:Series SeriesName="Q4" Binding="SalesQ4" LegendGroup="Sales" StackingGroup="0" />
<Chart:Series SeriesName="Q4" Binding="ProfitQ4" LegendGroup="Profit" StackingGroup="1" />
<Chart:C1FlexChart.AxisY>
<Chart:Axis Format="$0M"
Labels="True"
Title="Million $"
Min="0" MajorGrid="True"
AxisLine="False"
Position="Left"
MajorTickMarks="None" />
</Chart:C1FlexChart.AxisY>
<!--凡例グループのヘッダーをスタイル設定します-->
<Chart:C1FlexChart.LegendGroupHeaderStyle>
<Chart:ChartStyle Stroke="DarkBlue"
FontFamily="Cambria"
FontStyle="Normal"
FontSize="15" FontWeight="Bold"/>
</Chart:C1FlexChart.LegendGroupHeaderStyle>
</Chart:C1FlexChart>