凡例は、チャートに描画された各データ系列に対応する色、記号、およびテキストの一覧を表示するチャート要素です。複数系列の場合に、プロットされたデータの理解と分析に役立ちます。

FlexChart では、系列の Name プロパティが設定されていると、自動的に凡例が表示されます。言い換えれば、系列に対応する凡例エントリを生成するには、その系列の Name プロパティが必要です。また、FlexChart は、チャート領域内の利用可能なスペースに合わせて自動的に凡例を配置します。ただし、プロット領域の上、下、左、または右に凡例を表示するように設定することもできます。それには、Position プロパティを設定します。利用可能なスペースを可能な限り最適化して使用するために、FlexChart は凡例をプロット領域の上または下に配置する場合は水平方向に表示し、左または右に配置する場合は垂直方向に表示します。同時に、必要に応じて向きを設定することもできます。

flexChart1.Series.Clear();

// チャートタイプを折れ線に設定します
flexChart1.ChartType = ChartType.Line;

// FlexChartのヘッダーを設定します
flexChart1.Header.Content = "Daily Price Movement";

// FlexChartのX軸を「名前」にバインドして、国名が横軸に表示されるようにします
flexChart1.BindingX = "Date";

// 複数の系列を作成して追加します
this.flexChart1.Series.Add(new Series { Binding = "High", Name = "Highs" });
this.flexChart1.Series.Add(new Series { Binding = "Low", Name = "Lows" });
            
// データをFlexChartに渡します
flexChart1.DataSource = GetQuotes(100);

// 凡例の位置と方向を設定します
flexChart1.Legend.Position = Position.Top;
flexChart1.Legend.Orientation = C1.Chart.Orientation.Horizontal;

flexChart1.Series.Clear()

' チャートタイプを折れ線に設定します
flexChart1.ChartType = ChartType.Line

' FlexChartのヘッダーを設定します
flexChart1.Header.Content = "Daily Price Movement"

' FlexChartのX軸を「名前」にバインドして、国名が横軸に表示されるようにします
flexChart1.BindingX = "Date"

' 複数の系列を作成して追加します
Me.flexChart1.Series.Add(New Series() With {
     .Binding = "High",
     .Name = "Highs"
})
Me.flexChart1.Series.Add(New Series() With {
     .Binding = "Low",
     .Name = "Lows"
})

' データをFlexChartに渡します
flexChart1.DataSource = GetQuotes(100)

' 凡例の位置と方向を設定します
flexChart1.Legend.Position = Position.Top
flexChart1.Legend.Orientation = C1.Chart.Orientation.Horizontal

系列の表示/非表示の切り替え

FlexChart クラスの LegendToggle プロパティが True に設定されている場合、ユーザーは、対応する凡例エントリを実行時にクリックしてデータ系列の表示/非表示を切り替えることもできます。

長い凡例テキストの管理

チャート領域に凡例項目のテキストの全体を表示するためのスペースが足りないことがあります。FlexChart の Legend クラスには TextWrapping プロパティが用意されており、これを使用して、テキストの幅が ItemMaxWidth プロパティで指定された値を超えた場合に、テキストを折り返したりトリミングすることができます。TextWrapping プロパティは、TextWrapping 列挙に含まれる値を受け取ります。

TextWrapping = TextWrapping.Wrap	TextWrapping = TextWrapping.Truncate

凡例のスタイル設定

FlexChart では、Legend クラスの Style プロパティを使用して、凡例および凡例項目のスタイルを設定できます。このプロパティを使用すると、凡例の塗りつぶし、塗りつぶしの色、ストローク幅、ストローク色などを指定できます。

凡例のスタイル設定

// 凡例のスタイルを設定します
flexChart1.Legend.Style.Font = new Font("Arial", 10, FontStyle.Italic);
flexChart1.Legend.Style.StrokeWidth = 0.75f;
flexChart1.Legend.Style.StrokeColor = Color.Firebrick;

' 凡例のスタイルを設定します
flexChart1.Legend.Style.Font = New Font("Arial", 10, FontStyle.Italic)
flexChart1.Legend.Style.StrokeWidth = 0.75F
flexChart1.Legend.Style.StrokeColor = Color.Firebrick

凡例のグループ化

凡例のグループ化とは、凡例項目によって提供されるデータに基づいて凡例項目を分類することです。この機能は通常、複数の積層系列がある場合にデータ系列のカテゴリを識別するために役立ちます。たとえば、複数の四半期の売上と利益を同じチャート領域にプロットする場合、凡例グループは、どの系列が売上系列で、どの系列が利益系列であるかを識別するために役立ちます。

凡例のグループ化

FlexChart を使用して凡例グループを作成するために、このコントロールは LegendGroup プロパティを提供します。このプロパティは、文字列値を受け取り、同じ値を持つ系列をグループ化します。このプロパティの値は、グループ名として機能するだけでなく、対応する凡例グループの上部に表示されるグループタイトルとしても機能します。LegendGroup プロパティが指定されていない系列は、0 番目のグループとして扱われ、グループタイトルなしで表示されます。FlexChart では、Legend クラスの GroupHeaderStyle プロパティを使用して、凡例グループのタイトルをカスタマイズすることもできます。

// 各系列のグループを指定します
flexChart1.Series[0].LegendGroup = "Sales";
flexChart1.Series[1].LegendGroup = "Profit";
flexChart1.Series[2].LegendGroup = "Sales";
flexChart1.Series[3].LegendGroup = "Profit";
flexChart1.Series[4].LegendGroup = "Sales";
flexChart1.Series[5].LegendGroup = "Profit";
flexChart1.Series[6].LegendGroup = "Sales";
flexChart1.Series[7].LegendGroup = "Profit";

// 凡例グループのヘッダーのスタイルをカスタマイズします
flexChart1.Legend.GroupHeaderStyle.Stroke = Brushes.DarkBlue;
flexChart1.Legend.GroupHeaderStyle.Font = new Font(FontFamily.GenericMonospace, 10f, FontStyle.Bold);

' 各系列のグループを指定します
flexChart1.Series(0).LegendGroup = "Sales"
flexChart1.Series(1).LegendGroup = "Profit"
flexChart1.Series(2).LegendGroup = "Sales"
flexChart1.Series(3).LegendGroup = "Profit"
flexChart1.Series(4).LegendGroup = "Sales"
flexChart1.Series(5).LegendGroup = "Profit"
flexChart1.Series(6).LegendGroup = "Sales"
flexChart1.Series(7).LegendGroup = "Profit"

' 凡例グループのヘッダーのスタイルをカスタマイズします
flexChart1.Legend.GroupHeaderStyle.Stroke = Brushes.DarkBlue
flexChart1.Legend.GroupHeaderStyle.Font = New Font(FontFamily.GenericMonospace, 10F, FontStyle.Bold)