Previous topicNext topic
Help > 开发指南 > 窗体开发 > 控件参考 > 控件参考 > 图表 > SmFlexChart > 属性 >
DataLabel数据标签

数据标签DataLabel

DataLabel(数据标签)是与数据点关联的标签，通常显示这些数据点的值。它们在图表中特别有用，因为仅通过查看数据点很难知道数据的确切值。

在 FlexChart 中，可以通过设置 DataLabel 属性（类型为 DataLabel 类）来显示数据标签。可以设置 DataLabel 类的 Content 属性，以指定要在数据标签中显示的内容。

Vb.Net
 
'Set chart's DataLabels value 
Me.flexChart1.DataLabel.Content = "{y}"

C#
 
//Set chart's DataLabels value 
this.flexChart1.DataLabel.Content = "{y}";

创建自定义数据标签

FlexChart 允许您通过将模板字符串分配给 Content 属性来创建自定义数据标签。您可以使用以下预定义参数来创建模板字符串。

参数 描述
x 指数据点的 X 值。
y 指数据点的 Y 值。
value 指数据点的 Y 值。
name 指数据点的 X 值。
seriesName 指系列的名称。
pointIndex 指数据点的索引。
P 指 Sunburst 中相对于父切片的百分比份额。
p 指旭日中相对于整个图表的百分比份额。


弹性图表还允许您设置要在数据标签中显示的值的格式。例如，您可以使用所需的货币、分隔符或偶数位来格式化销售额或费用数字。您还可以使用各种日期格式（长整型和短型）来显示时间序列的值。

Vb.Net
 
'Set template string to create custom content for data labels 
Me.flexChart1.DataLabel.Content = "Country: {seriesName} " & vbLf & " Temp: {y}°F"

C#
 
//Set template string to create custom content for data labels 
this.flexChart1.DataLabel.Content = "Country: {seriesName} \n Temp: {y}°F";

数据标签位置

FlexChart 允许您使用 Position 属性指定相对于数据点显示数据标签的位置。此属性接受来自 C1 的值。Chart.LabelPosition 枚举，允许您将数据标签定位到数据点的顶部、底部、中心、左侧或右侧。

对于饼图和旭日图，数据标签的定位可以通过 PieDataLabel 类的 Position 属性完成，该属性接受来自 PieLabelPosition 枚举的值。此属性允许您将数据标签定位到图表的内部、外部或中心。您还可以使用相同的属性在图表内以圆形或径向方向显示数据标签。

上述两个属性的默认值均为 Auto，它根据图表上的可用空间自动定位数据标签。您还可以选择将此值设置为“None”以隐藏数据标签。

Vb.Net
 
'Set chart's DataLabels position
Me.flexChart1.DataLabel.Position = LabelPosition.Top

C#
 
//Set chart's DataLabels position
this.flexChart1.DataLabel.Position = LabelPosition.Top;

设置数据标签样式

FlexChart 提供了与数据标签相关的各种其他属性，这些属性有助于图表的整体外观和清晰的理解。例如，为了明确哪个数据标签属于数据打包图表中的特定数据点，FlexChart 允许您通过将 ConnectingLine 属性设置为 true 来显示连接线。还可以设置偏移量来定义数据标签与数据点之间的显示距离。此外，FlexChart 还允许您通过将 Border 属性设置为 true 来显示带有边框的数据标签。您甚至可以使用 BorderStyle 属性设置边框样式，以便数据标签在图表背景中突出显示。另一个有助于提高数据标签可见性的属性是 Angle 属性，该属性可以设置为 0 到 90 度之间的值。这也有助于避免重叠的数据标签。有关管理重叠数据标签的详细信息，请参阅管理重叠数据标签。

Vb.Net
 
'Sett how far data labels appears to data point
flexChart1.DataLabel.Offset = 10

'Connect data labels with data point with a connecting line
flexChart1.DataLabel.ConnectingLine = True

'Set to show data labels borders
flexChart1.DataLabel.Border = True

'Style data labels
flexChart1.DataLabel.Style.Font = New Font(flexChart1.Font.FontFamily, 8, FontStyle.Italic)
flexChart1.DataLabel.BorderStyle.StrokeColor = Color.OrangeRed
flexChart1.DataLabel.BorderStyle.FillColor = Color.AliceBlue

'Set the data label angle
flexChart1.DataLabel.Angle = 45

C#
 
//Set how far data labels appears to data point
flexChart1.DataLabel.Offset = 10;

//Connect data labels with data point with a connecting line
flexChart1.DataLabel.ConnectingLine = true;

//Set to show data labels borders
flexChart1.DataLabel.Border = true;

//Style data labels
flexChart1.DataLabel.Style.Font = new Font(flexChart1.Font.FontFamily, 8, FontStyle.Italic);
flexChart1.DataLabel.BorderStyle.StrokeColor = Color.OrangeRed;
flexChart1.DataLabel.BorderStyle.FillColor = Color.AliceBlue;

//Set the data label angle
flexChart1.DataLabel.Angle = 45;