FlexChart for UWP
カスタムの凡例アイコン
FlexChart > FlexChart の操作 > FlexChart の要素 > FlexChart の凡例 > カスタムの凡例アイコン

FlexChart allows you to apply custom image or icon for customizing the legend items. To enable FlexChart to display custom legend icon, implement the GetLegendItemImageSource method provided by ISeries interface. This method primarily accepts two parameters; index and _size. The index parameter refers to the legend item position and _size parameter refers to the default legend icon size.

In the example code below, we have implemented the GetLegendItemImageSource method to customize the image size and draw a border around it. This method then returns the image object. To apply the custom legend icon add object of the class SeriesWithPointLegendItems to the chart Series collection.

The image shows how FlexChart appears after using custom legend icon.

Use the following code snippet to implement custom legend icon.

コードのコピー
<Chart:C1FlexChart x:Name="flexChart" ItemsSource="{Binding SmartPhoneVendors}" Binding="Sales" BindingX="Name" Header="Top Smartphone Vendors" Grid.Row="1">
            <Chart:C1FlexChart.HeaderStyle>
                <Chart:ChartStyle FontSize="15" FontFamily="GenericSansSerif"/>
            </Chart:C1FlexChart.HeaderStyle>
</Chart:C1FlexChart>
HTML
コードのコピー
public partial class LegendItems
    {
        static List<SmartPhoneVendor> vendors = new List<SmartPhoneVendor>();
        static Image LegendIconImage = Properties.Resources.usa;
        Series customSeries;
        public LegendItems()
        {
            InitializeComponent();
            vendors = SmartPhoneVendors();       

            // カスタム系列を追加します
            customSeries = new SeriesWithPointLegendItems();
            customSeries.Name = "Sales in USA";
            flexChart1.Series.Add(customSeries);
            flexChart1.Legend.Position = Position.Left;
            flexChart1.ToolTip.Content = "{seriesName}\r\n{value}";
                        
        }
        public class SeriesWithPointLegendItems : Series, ISeries
        {
            object ISeries.GetLegendItemImageSource(int index, ref C1.Chart._Size imageSize)
            {
                {
                    // 元の画像/ロゴはすべて50x50ピクセルです
                    // ここでは、ロゴの周りに5ピクセルのボーダーが追加された新しいイメージに置き換えられます
                    imageSize.Height = 60;
                    imageSize.Width = 60;

                    SmartPhoneVendor vendor = vendors.ElementAt(index);
                    if (LegendIconImage != null && LegendIconImage.Width != 60)
                    {
                        Bitmap bmp = new Bitmap(60, 60);
                        using (SolidBrush sb = new SolidBrush(vendor.Color))
                        {
                            using (Graphics g = Graphics.FromImage(bmp))
                            {
                                Rectangle r = new Rectangle(0, 0, (int)imageSize.Width, (int)imageSize.Height);
                                using (Pen p = new Pen(sb))
                                {
                                    g.DrawRectangle(p, r);
                                }
                                g.FillRectangle(sb, r);

                                Point ci = new Point((int)(0.5 * (imageSize.Width - LegendIconImage.Width)),
                                    (int)(0.5 * (imageSize.Height - LegendIconImage.Height)));
                                g.DrawImage(LegendIconImage, ci);
                            }
                        }
                        LegendIconImage = bmp;
                    }
                    // ロゴビットマップの元のサイズを維持しますが、グラフウィンドウがビットマップを適切に表示するには
             // 小さすぎる場合は、サイズを縮小します
                    Size bounds = this.Chart.ClientSize;
                    double divadj = (bounds.Height > 800) ? 12 : 25;
                    double fracHeight = bounds.Height / divadj;
                    if (fracHeight < imageSize.Height)
                        imageSize.Width = imageSize.Height = fracHeight;
                    return LegendIconImage;
                }
            }
        }
        private static List<SmartPhoneVendor> SmartPhoneVendors()
        {

            vendors.Add(new SmartPhoneVendor()
            {
                Name = "Apple",
                Color = Color.FromArgb(136, 189, 230),
                Sales = 350,
            });
            vendors.Add(new SmartPhoneVendor()
            {
                Name = "LG",
                Color = Color.FromArgb(251, 178, 88),
                Sales = 120,
            });
           
            vendors.Add(new SmartPhoneVendor()
            {
                Name = "Samsung",
                Color = Color.FromArgb(188, 153, 199),
                Sales = 280,
            });
          
            vendors.Add(new SmartPhoneVendor()
            {
                Name = "Xiaomi",
                Color = Color.FromArgb(240, 126, 110),
                Sales = 68,
            });

            return vendors;
        }
        public class SmartPhoneVendor
        {
            public string Name { get; set; }
            public double Sales { get; set; }
            public Color Color { get; set; }
        }
    }