ScatterLine图表

的Blazor散线图很像散射图表——它将数据显示为由项目值定义的点，但点是由线连接的，因此它可以解释序列中缺失的值。它的x轴是数字，不需要项目。

您通常会使用ScatterLine图表来显示不同数据集之间的关系，例如科学(实验)结果，或者当您需要在线形图表上有两个数值轴时。

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

创建散点图:

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

@* ScatterLine Series *@                         @code { public class ModelData { public int X { get; set; } public int Y { get; set; } } public List Series1Data = new List() { new ModelData() { X = 10, Y = 10 }, new ModelData() { X = 15, Y = 20 }, new ModelData() { X = 20, Y = 25 }, new ModelData() { X = 32, Y = 40 }, new ModelData() { X = 43, Y = 50 }, new ModelData() { X = 55, Y = 60 }, new ModelData() { X = 60, Y = 70 }, new ModelData() { X = 70, Y = 80 }, new ModelData() { X = 90, Y = 100 }, }; public List Series2Data = new List() { new ModelData() { X = 10, Y = 40 }, new ModelData() { X = 17, Y = 50 }, new ModelData() { X = 18, Y = 70 }, new ModelData() { X = 35, Y = 90 }, new ModelData() { X = 47, Y = 95 }, new ModelData() { X = 60, Y = 100 }, }; public List Series3Data = new List() { new ModelData() { X = 10, Y = 70 }, new ModelData() { X = 13, Y = 90 }, new ModelData() { X = 25, Y = 100 }, }; }

散点线图具体外观设置

标记

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

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

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

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

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

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

颜色

线条和标记的颜色是通过颜色属性可以接受任何有效的CSS颜色(例如，#六边形abcdef，# f00,或蓝色的）.

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

ColorField

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

线条样式

你可以用不同的样式渲染点之间的线条。控件可以设置所支持的样式风格的成员的属性Telerik.Blazor.ChartSeriesStyle枚举:

• 正常的-这是默认的样式。它在数据点之间产生一条直线。

• 一步-样式通过垂直和水平线呈现数据点之间的连接。它适用于表示变化之间的值是恒定的。支持分类类型的行只能用图表，不能用散点图。

• 光滑的-这种样式使图表通过数据点显示一条拟合曲线。当数据需要用曲线显示时，或者当您希望用平滑的线而不是直线连接点时，它是适用的。不支持堆放缺少值的级数。

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

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

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

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

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

ChartXAxes>ChartXAxis>ChartXAxisLabelsRotation标签

你可以在哪里设置角属性设置为所需的度数(它们可能是负数或正数)。通过使用类似的方法，你可以控制ChartXAxisLabelsBorder(添加边框),ChartXAxisLabelsMargin(为顶部、底部、左侧和右侧添加空白)和其他。

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

的标签格式和标题文本的更改，请参阅上面的代码片段ChartXAxis和ChartYAxes．

另请参阅

• 现场演示:散线图