气泡图
的Blazor气泡图将数据显示为具有由其项的值定义的坐标和大小的点。你可以把泡沫图看作是散点图,其中数据点被替换为冒泡。这使得气泡图可以显示三维数据——两个值表示物品的坐标,一个值表示物品的大小。
气泡图对于可视化不同的科学关系(例如,经济,社会等)是有用的。此图表类型的x轴也是数值的,不需要项目。
创建气泡图:
- 添加一个
ChartSeries
到ChartSeriesItems
集合 - 设置它
类型
财产ChartSeriesType。泡沫
- 为其提供数据集合
数据
属性,其中包含X轴和Y轴以及气泡大小的数值数据
一个气泡图,显示了预期寿命与生育率之间的人口变化
@* Bubble Series *@ @code { string labelTemplate = "#=dataItem.Country#"; public class ModelData { public double LifeExpectancy { get; set; } public double FertilityRate { get; set; } public int PopulationChange { get; set; } public string Country { get; set; } } public List Series1Data = new List() { new ModelData() { LifeExpectancy = 80.66, FertilityRate = 1.27, PopulationChange = 500000, Country = "Canada" }, new ModelData() { LifeExpectancy = 78.09, FertilityRate = 2.3, PopulationChange = 7600000, Country = "USA" } }; public List Series2Data = new List() { new ModelData() { LifeExpectancy = 67.3, FertilityRate = 1.54, PopulationChange = 25000, Country = "Denmark" }, new ModelData() { LifeExpectancy = 74.3, FertilityRate = 1.85, PopulationChange = 3000000, Country = "Great Britain" } }; }
气泡图特定的外观设置
颜色
一个系列的颜色是通过控制的颜色
属性,可以采用任何有效的CSS颜色(例如,#六边形abcdef
,# f00
,或蓝色的
).颜色控制气泡的填充颜色。
的ColorField
可以改变个别项目的颜色。要使用它,将有效的CSS颜色传递给模型中的相应字段,图表将使用它的值而不是颜色
参数。
不透明度
控件控制序列填充的透明程度不透明度
财产。0
表示一个完全透明的级数,并且1
意思是完全不透明(非透明)的填充。您可以使用十进制值来设置所需的透明度(例如,不透明度= " 0.3 "
).
负
X和Y字段允许为负值,因为它们是在标准数值轴上绘制的。
尺寸字段通常应该为正值,因为它与气泡的物理尺寸相关。若要呈现负值,请设置可见
参数。ChartSeriesNegativeValues
标签的系列真正的
.具有负大小值的气泡将按其大小为正的方式计算。为了区分两者,您可以让负项以不同的颜色通过颜色
参数。ChartSeriesNegativeValues
标签。
负气泡尺寸
负气泡大小可以显示值的减小,并且可以呈现与系列其他部分不同的颜色*@ < ChartSeriesNegativeValues Visible="true" Color="cyan"> @code{公共类ModelData{公共int X {get;设置;}公共int Y{获取;设置;} public int大小{get;设置;}公共字符串元数据{获取; set; } } public List SeriesData = new List() { new ModelData() { X = 250, Y = 5000, Size = 50000 , MetaData = "positive size"}, new ModelData() { X = 500, Y = 1100, Size = -760000, MetaData = "negative size" } }; }
自定义图表元素-嵌套标签设置
在图表中配置嵌套属性和子元素时,内部标记将包含它们的父标记名称,并在其末尾添加细节。一般来说,这种嵌套标记的结构将是<图*级* * *细节>
类别可以是以下其中之一:
- CategoryAxis
- ChartArea
- 传说
- PlotArea
- SeriesItems
- 标题
- 工具提示
- ValueAxis
- XAxes
- YAxes
- 和其他人
要自定义图表,请寻找嵌套标记及其属性——内部标记将包含它们的父标记名称并在其末尾添加细节。例如,
ChartSeries
标签有一个ChartSeriesLabels
标记,该标记公开配置选项和更多子标记。
例如,对于数值可以旋转标签的图表ChartXAxes
或ChartYAxes
这取决于您的应用程序设计需求和布局。这可以通过
ChartXAxes
>ChartXAxis
>ChartXAxisLabelsRotation
标签
你可以在哪里设置角
属性转换为以度为单位的所需值(它们可能是负数或正数)。通过使用类似的方法,你可以控制ChartXAxisLabelsBorder
(添加边框),ChartXAxisLabelsMargin
(为上、下、左、右添加空白)等。
这种方法不仅限于标签——它可以用于适用于图表类型的所有标签,例如图表标题ChartTitle
>ChartTitleMargin
.