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; |