散点图

的Blazor散点图将数据显示为由其项的值定义的点。它的x轴也是数值的，不需要分类项目，而是数值。

散点图用于显示不同数据集之间的关系，例如科学(实验)结果。

本文假设您熟悉图基础而且数据绑定．

创建散点图:

1. 添加一个ChartSeries到ChartSeriesItems集合
2. 设置它类型财产ChartSeriesType。散射
3. 为其提供数据集合数据属性，其中包含X轴和Y轴的数值数据

@* Scatter Series *@                    @code { public class ModelData { public double Strength { get; set; } public double Errors { get; set; } } public List Series1Data = new List() { new ModelData { Strength = -82, Errors = 15 }, new ModelData { Strength = -79, Errors = 13 }, new ModelData { Strength = -77, Errors = 10 }, new ModelData { Strength = -74, Errors = 7 }, new ModelData { Strength = -70, Errors = 3 }, new ModelData { Strength = -65, Errors = 1 } }; public List Series2Data = new List() { new ModelData { Strength = -80, Errors = 25 }, new ModelData { Strength = -76, Errors = 22 }, new ModelData { Strength = -73, Errors = 17 }, new ModelData { Strength = -70, Errors = 15 }, new ModelData { Strength = -65, Errors = 12 }, new ModelData { Strength = -61, Errors = 10 }, new ModelData { Strength = -55, Errors = 7 }, new ModelData { Strength = -50, Errors = 3 } }; }

散点图特定外观设置

标记

每个数据项都由一个标记表示。你可以通过子进程来控制它的设置ChartSeriesMarkers系列标签。

可以通过设置标记来隐藏标记可见财产假．

的大小属性是标记的大小(以像素为单位)。

的类型属性的成员Telerik.Blazor.ChartSeriesMarkersType枚举:

• 圆-默认
• 交叉
• 广场
• 三角形

的旋转属性是标记从其默认方向旋转的程度。

颜色

控件控制线条和标记的颜色颜色属性，可以采用任何有效的CSS颜色(例如，#六边形abcdef，# f00,或蓝色的）.

控件可以控制标记的颜色背景嵌套属性ChartSeriesMarkers标签。

ColorField

你可以通过ColorField将图表作为模型的一部分，并且数据点(标记)将使用该颜色而不是颜色这个系列的背景的标记设置。

自定义图表元素-嵌套标签设置

在图表中配置嵌套属性和子元素时，内部标记将包含它们的父标记名称，并在其末尾添加细节。一般来说，这种嵌套标记的结构将是<图*级* * *细节>类别可以是以下其中之一:

• CategoryAxis
• ChartArea
• 传说
• PlotArea
• SeriesItems
• 标题
• 工具提示
• ValueAxis
• XAxes
• YAxes
• 和其他人

要自定义图表，请寻找嵌套标记及其属性——内部标记将包含它们的父标记名称并在其末尾添加细节。例如，ChartSeries标签有一个ChartSeriesLabels标记，该标记公开配置选项和更多子标记。

例如，对于数值可以旋转标签的图表ChartXAxes或ChartYAxes这取决于您的应用程序设计需求和布局。这可以通过

ChartXAxes>ChartXAxis>ChartXAxisLabelsRotation标签

你可以在哪里设置角属性转换为以度为单位的所需值(它们可能是负数或正数)。通过使用类似的方法，你可以控制ChartXAxisLabelsBorder(添加边框),ChartXAxisLabelsMargin(为上、下、左、右添加空白)等。

这种方法不仅限于标签——它可以用于适用于图表类型的所有标签，例如图表标题ChartTitle>ChartTitleMargin．

控件的标题文本设置，请参见上面的代码片段ChartXAxis和ChartYAxes．

另请参阅

• 现场演示:散点图