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

图表标注是一种可视化工具，可通过从要突出显示的点到带有信息文本的框的线或箭头来帮助强调图表上的特定系列或数据点。这些标注不仅可以为图表提供更多信息，而且还可以直接与重点数据联系在一起，从而帮助您轻松理解。例如，图表标注可以很容易地指示与最大和最小成本相对应的值，如下例所示。

在FlexChart中，您可以通过执行以下简单步骤，使用Polygon类型注释创建图表标注  。在此示例中，我们演示了两种类型的标注，一种具有简单的直线连接，另一种具有箭头连接。

1.创建应用

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

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

  1. 创建一个数据源。

    CS
    public class DataService
{
    static Random rnd = new Random();
    public static List<UnitsCost> GetUnitCostData()
    {
        var data = new List<UnitsCost>();
        var date = new DateTime(2017, 1, 1);
        int cost = 900;
        for (int i = 10; i <= 180; i += 10)
        {
            cost += i <= 100 ? -rnd.Next(20, 70) : rnd.Next(20, 50);
            data.Add(new UnitsCost
            {
                Units = i,
                Cost = cost,
            });
        }
        return data;
    }
}
  2. 通过设置DataSource属性将FlexChart绑定到此数据源  。
  3. 清除图表中显示的默认系列，并使用Add方法添加一个新系列。
  4. 通过设置BindingX和Binding属性来配置X和Y轴  。
  5. 通过设置ChartType和其他必需的属性来配置图表  。

  6. 初始化FlexChart 的  Rendering事件以调用自定义方法SetupAnnotations，该方法在以下步骤中实现以创建标注。

    CS
     protected void SetupChart()
 {
     _data = DataService.GetUnitCostData();
     //this.flexChart1.Header.Content = "Relationship between Production and Cost";

     this.flexChart1.Binding = "Cost";
     this.flexChart1.BindingX = "Units";
     this.flexChart1.DataSource = _data;
     this.flexChart1.ChartType = ChartType.LineSymbols;
     this.flexChart1.Series.Add(new Series() { Name = "Cost" });

     this.flexChart1.AxisX.Title = "Quantity";
     this.flexChart1.AxisY.Title = "Per Unit Cost";

     this.flexChart1.Rendering += FlexChart1_Rendering; 
     
 }

3.创建和添加注释

  1. 通过创建AnnotationLayer类的实例来创建注释层  。
  2. 通过创建Polygon类的实例来创建线路标注  。
  3. 指定点以创建线标注，并设置相关属性以附加和设置注释样式。
  4. 创建一个自定义方法GetArrowCalloutPoints，以测量注释文本的大小并相应地计算箭头标注注释的坐标。
  5. 通过创建Polygon类的另一个实例来创建箭头标注。
  6. 调用GetArrowCalloutPoints方法并指定其他相关属性以附加和设置注释样式。

  7. 使用Add方法在注释层中添加两个注释。

    CS
    private void SetupAnnotations()
{
    var annotationLayer = new AnnotationLayer(this.flexChart1);
    var orderedCost = _data.OrderBy(x => x.Cost).ToList();
    var arrowCallout = new Polygon("Maximum Cost")
    {
        Attachment = AnnotationAttachment.DataIndex,
        SeriesIndex = 0,
        PointIndex = _data.IndexOf(orderedCost[_data.Count - 1]),
    };

    arrowCallout.Style.FillColor = Color.FromArgb(100, Color.Pink);
    arrowCallout.Style.StrokeColor = Color.Red;
    arrowCallout.ContentStyle.StrokeColor = Color.Red;
    foreach (PointF point in GetArrowCalloutPoints(arrowCallout, orderedCost[_data.Count - 1]))
    {
        arrowCallout.Points.Add(point);
    }

    var lineCallout = new Polygon("Minimum Cost")
    {
        Attachment = AnnotationAttachment.DataIndex,
        SeriesIndex = 0,
        PointIndex = _data.IndexOf(orderedCost[0]),
        ContentCenter = new PointF(30, -60),
        Points = { new PointF(0, 0), new PointF(30, -40), new PointF(-30, -40), new PointF(-30, -80), new PointF(90, -80), new PointF(90, -40), new PointF(30, -40) }
    };
    lineCallout.Style.FillColor = Color.FromArgb(100, Color.Aqua);
    lineCallout.Style.StrokeColor = Color.Blue;
    lineCallout.ContentStyle.StrokeColor = Color.Blue;

    annotationLayer.Annotations.Add(arrowCallout);
    annotationLayer.Annotations.Add(lineCallout);
}

请注意，上述步骤中使用的自定义方法GetArrowCalloutPoints用于获取注释文本的大小并基于该方法计算多边形坐标。

4.渲染标注

  1. 在FlexChart类的Rendering事件中调用SetupAnnotations方法。

    CS
    private void FlexChart1_Rendering(object sender, RenderEventArgs e)
{
    if (_renderEngine == null)
    {
        _renderEngine = e.Engine;
        SetupAnnotations();
    }
}
  2. 运行该示例以呈现带有标注的图表。

我们可以看到显示了一个带线条的标注和带箭头的标注的图表，以指示与最小和最大成本相关的数据点。同样，您可以通过测量要使用的文本的大小并相应地计算“多边形”注释的坐标来创建其他多边形形式的标注。有关详细的实现，请参阅控件随附的FlexChartExplorer示例。

  • 无标签