ComponentOne中文技术文档
页面树结构
转至元数据结尾
转至元数据起始

默认情况下，FlexChart控件为每个系列分配颜色，并基于分配给相应系列的颜色创建图例图标。但是，您也可以创建自定义图例图标。例如，如果在显示不同国家的数据时将国旗标志显示为图例图标，则将使用户更容易读取数据。 

要在创建图表后自定义图例图标，必须创建一个继承Series类和ISeries接口的自定义系列  。此接口提供了GetLegendItemImageSource方法，该方法使您可以访问图例图标的源，并通过在图例图标框内设置标志图像来对其进行自定义。本演练将带您完成以下详细步骤，以创建自定义图例图标。

1.创建应用

  1. 创建一个新的Windows窗体应用程序。
  2. 将FlexChart控件从工具箱拖放到窗体上。

2.将数据源绑定给FlexChart控件

  1. 创建一个数据源。

    CS
    /// <summary>
/// Method for creating data for FlexChart
/// </summary>
public static List<SmartPhoneVendor> SmartPhoneVendors()
{
    List<SmartPhoneVendor> vendors = new List<SmartPhoneVendor>();
    vendors.Add(new SmartPhoneVendor()
    {
        Name = "Apple",
        Sales = 215.2
    });
    vendors.Add(new SmartPhoneVendor()
    {
        Name = "Huawei",
        Sales = 139
    });
    vendors.Add(new SmartPhoneVendor()
    {
        Name = "Lenovo",
        Sales = 50.7
    });
    vendors.Add(new SmartPhoneVendor()
    {
        Name = "LG",
        Sales = 55.1,
    });
    vendors.Add(new SmartPhoneVendor()
    {
        Name = "Oppo",
        Sales = 92.5
    });
    vendors.Add(new SmartPhoneVendor()
    {
        Name = "Samsung",
        Sales = 310.3
    });
    vendors.Add(new SmartPhoneVendor()
    {
        Name = "Vivo",
        Sales = 71.7
    });
    vendors.Add(new SmartPhoneVendor()
    {
        Name = "Xiaomi",
        Sales = 61
    });
    vendors.Add(new SmartPhoneVendor()
    {
        Name = "ZTE",
        Sales = 61.9
    });

    return vendors;
}
  2. 通过设置DataSource属性将FlexChart绑定到此数据源  。
  3. 通过设置BindingX和Binding属性来配置X和Y轴  。

  4. 通过设置ChartType和其他必需的属性来配置图表  。

    CS
    //Setting FlexChart's Header 
flexChart1.Header.Content = "Top Smartphone Vendors in USA";

//Passing data in FlexChart
flexChart1.DataSource = vendors;

//Binding FlexChart's AxisX to 'Name' so vendor names appear in Horizontal axis
flexChart1.BindingX = "Name";

//Binding FlexChart to 'Sales' so their market share appears in Vertical axis
flexChart1.Binding = "Sales";

3.创建自定义系列

  1. 创建一个从Series类和 ISeries接口继承的自定义类型的系列。在此示例中，我们创建了一个名为SeriesWithPointLegendItems的类。
  2. 实现 ISeries.GetLegendItemImageSource  方法以访问图例的大小并使用Graphics.DrawImage方法绘制图标  。

  3. 您还可以设置图例图标大小，以根据窗口大小进行调整。

    CS
    public class SeriesWithPointLegendItems : Series, ISeries
{
    object ISeries.GetLegendItemImageSource(int index, ref C1.Chart._Size imageSize)
    {
        {
            imageSize.Height = 80;
            imageSize.Width = 130;

 

            SmartPhoneVendor vendor = vendors.ElementAt(index);
            Bitmap bm = new Bitmap(Properties.Resources.US);
            Image LegendIconImage = bm;
            if (LegendIconImage != null && LegendIconImage.Width != 130)
            {
                Bitmap bmp = new Bitmap(130, 80);
                using (SolidBrush sb = new SolidBrush(Color.White))
                {
                    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(new SolidBrush(Color.SkyBlue), r);
                        Point ci = new Point((int)(0.5 * Math.Abs(imageSize.Width - LegendIconImage.Width)),
                            (int)(0.5 * Math.Abs(imageSize.Height - LegendIconImage.Height)));
                        
                        g.DrawImage(LegendIconImage, ci);
                    }
                }
                LegendIconImage = bmp;
            }
            // Keep the original size of the logo bitmaps, but reduce their size if the chart window
            // is too small to display the bitmaps properly.
            Size bounds = this.Chart.ClientSize;
            double divadj = (bounds.Height > 700) ? 5 : 11;
            double fracHeight = bounds.Height / divadj;
            if (fracHeight < imageSize.Height)
                imageSize.Width = imageSize.Height = fracHeight;
            return LegendIconImage;
        }
    }
}

4.将自定义系列添加到系列集合

  1. 清除显示在图表中的默认序列。
  2. 创建自定义系列类SeriesWithPointLegendItems的对象。

  3. 使用Add方法将此对象添加到Chart Series集合中。

    CS
    //Clear the default series
flexChart1.Series.Clear();

//Creating custom series that shows legends with images, filled with color and categrozied in groups
_customSeries = new SeriesWithPointLegendItems
{
    Name = "Sales",
};

//Adding custom series to FlexChart
flexChart1.Series.Add(_customSeries);

运行该应用程序可以看到由系列颜色的边框包围的国家/地区国旗标志，在图表中显示为自定义图例图标。同样，在多个系列和图表的情况下，可以自定义多个图例图标。有关自定义图例图标的详细实现，请参阅控件中随附的FlexChartExplorer示例项目。

  • 无标签