多轴
对于给定的维度，可以让图表呈现多个轴。这使您可以将系列与不同的轴相关联，并将不同的轴定位到图表的左、右、顶部或底部。当您的某些系列数据在量级上与其他数据相差很大时，或者用不同的单位进行测量时，这通常是有用的。您还可以将级数与x轴上的不同类别相关联，而不必将它们并排放在一起。
的例子部分提供了几个常见的用例。
本文包含以下部分:
在使用多个轴时，通常需要设置轴的颜色以匹配
颜色使用它的级数的。
定义多个轴
多个轴的声明方式取决于图表系列类型：
分类图
- 定义对应的额外轴
ChartCategoryAxes和/或ChartValueAxes标签。 - 设置它
的名字符合要求的属性。默认情况下，序列使用第一个轴。 - 提供
的名字值到您希望通过它使用的系列轴而且CategoryAxis为Y而且X轴分别。
数值图表
- 定义对应的额外轴
ChartXAxes和/或ChartYAxes标签。 - 设置它
的名字符合要求的属性。默认情况下，序列使用第一个轴。 - 提供
的名字值到您希望通过它使用的系列桠溪而且xAxis属性。
选择轴线位置
要定义额外轴的位置，你需要:
- 使用
AxisCrossingValue的第一个轴的属性其他维度。 将它设置为一个数组，指明在哪些点上它将被多个轴交叉:
- 对于类别轴，数字表示轴将相交的类别的索引
- 对于数字轴，数字表示轴相交的值
数组中的项对应于坐标轴声明的顺序。
您可以设置一个非常大或非常小的值，以使某个轴出现在图表的末尾。你可以在移动x轴标签到底部部分。
例子
在本节中，您可以找到代码示例、对行为的解释和预期行为的截图，这样您就可以理解图表的行为并利用它。
分类图-值轴示例
在下面的示例中，您可以看到如何定义多个y轴、将一个系列与一个轴关联以及更改一个轴的位置。
多个y轴，并根据类别轴定义它们的位置
多个y轴及其位置 < chartvalueaxistext ="second (named) Axis"> @code {List类别轴
您可以使用多个类别轴将每个系列与轴上自己的点关联起来，而不是让它们在同一个轴上相加。
折线图上的多个类别轴
多个类别轴及其位置 @code{公共类MyDataModel{公共字符串FirstSeriesCategories {get;设置;}公共字符串SecondSeriesCategories {get;设置;}公共int Product1 {get; set; } public int Product2 { get; set; } } public List chartData = new List() { new MyDataModel() { FirstSeriesCategories = "a", SecondSeriesCategories = "e", Product1 = 1, Product2 = 20 }, new MyDataModel() { FirstSeriesCategories = "match", SecondSeriesCategories = "match", Product1 = 2, Product2 = 30 }, new MyDataModel() { FirstSeriesCategories = "c", SecondSeriesCategories = "g", Product1 = 3, Product2 = 40 }, new MyDataModel() { FirstSeriesCategories = "d", SecondSeriesCategories = "h", Product1 = 4, Product2 = 50 }, }; public object[] crossingPoints = new object[] { -9999999, 9999999 }; } 条形图和柱形图的行为
重要的是要记住具有多个类别轴的系列的行为:
- 系列项目将不并排呈现，并可能重叠(主要适用于柱状和列状系列)。
- 对于某些图表类型(如柱状图或柱状图)，系列项触及类别轴，交叉值过大或过小可能导致意外出现。
柱状图上的多个类别轴具有适当的交叉值和序列值
坐标轴位置的可行值 @code{公共类MyDataModel{公共字符串FirstSeriesCategories {get;设置;}公共字符串SecondSeriesCategories {get;设置;}公共int Product1 {get; set; } public int Product2 { get; set; } } public List chartData = new List() { new MyDataModel() { FirstSeriesCategories = "a", SecondSeriesCategories = "e", Product1 = 1, Product2 = 20 }, new MyDataModel() { FirstSeriesCategories = "match", SecondSeriesCategories = "match", Product1 = 2, Product2 = 30 }, new MyDataModel() { FirstSeriesCategories = "c", SecondSeriesCategories = "g", Product1 = 3, Product2 = 40 }, new MyDataModel() { FirstSeriesCategories = "d", SecondSeriesCategories = "h", Product1 = 4, Product2 = 50 }, }; public object[] crossingPoints = new object[] { -9999999, 20 }; } 具有多个轴的柱状图和柱状图的潜在不良行为的示例，以及产生这些问题的代码。
潜在的不良行为1 @code{公共类MyDataModel{公共字符串FirstSeriesCategories {get;设置;}公共字符串SecondSeriesCategories {get;设置;}公共int Product1 {get; set; } public int Product2 { get; set; } } public List chartData = new List() { new MyDataModel() { FirstSeriesCategories = "a", SecondSeriesCategories = "e", Product1 = 1, Product2 = 2 }, new MyDataModel() { FirstSeriesCategories = "match", SecondSeriesCategories = "match", Product1 = 2, Product2 = 3 }, new MyDataModel() { FirstSeriesCategories = "c", SecondSeriesCategories = "g", Product1 = 3, Product2 = 4 }, new MyDataModel() { FirstSeriesCategories = "d", SecondSeriesCategories = "h", Product1 = 4, Product2 = 5 }, }; public object[] crossingPoints = new object[] { -9999999, 9999999 }; } 潜在的不良行为2 @code{公共类MyDataModel{公共字符串FirstSeriesCategories {get;设置;}公共字符串SecondSeriesCategories {get;设置;}公共int Product1 {get; set; } public int Product2 { get; set; } } public List chartData = new List() { new MyDataModel() { FirstSeriesCategories = "a", SecondSeriesCategories = "e", Product1 = 1, Product2 = 2 }, new MyDataModel() { FirstSeriesCategories = "match", SecondSeriesCategories = "match", Product1 = 2, Product2 = 3 }, new MyDataModel() { FirstSeriesCategories = "c", SecondSeriesCategories = "g", Product1 = 3, Product2 = 4 }, new MyDataModel() { FirstSeriesCategories = "d", SecondSeriesCategories = "h", Product1 = 4, Product2 = 5 }, }; } 数值图表示例
在使用数字图表时，可以在ChartXAxes而且ChartYAxes标签。
数字图表中的多个轴
@*两个扭矩系列都使用扭矩y轴。两种电机系列均采用x轴电机。电气系列的默认暖色是通过使电机x轴橙色(您可以选择更好地匹配您的场景的颜色)*@ @code { public object[] crossingValues = new object[] { 0, 99999 }; public class ModelData { public int X { get; set; } public int Y { get; set; } } public List GasPower = new List() { new ModelData() { X = 1000, Y = 80 }, new ModelData() { X = 3000, Y = 100 }, new ModelData() { X = 4500, Y = 140 }, new ModelData() { X = 6000, Y = 170 }, new ModelData() { X = 6500, Y = 180 }, }; public List GasTorque = new List() { new ModelData() { X = 1000, Y = 70 }, new ModelData() { X = 3000, Y = 90 }, new ModelData() { X = 4500, Y = 120 }, new ModelData() { X = 6000, Y = 140 }, new ModelData() { X = 6500, Y = 120 }, }; public List ElectricalPower = new List() { new ModelData() { X = 0, Y = 0 }, new ModelData() { X = 100, Y = 10 }, new ModelData() { X = 1000, Y = 50 }, new ModelData() { X = 2000, Y = 110 }, }; public List ElectricalTorque = new List() { new ModelData() { X = 0, Y = 100 }, new ModelData() { X = 100, Y = 100 }, new ModelData() { X = 1000, Y = 100 }, new ModelData() { X = 2000, Y = 100 }, }; } 移动x轴标签到底部
这个例子展示了如何将x轴标签移动到图表的底部。当值为负值且不希望x轴标签与级数本身重叠时，这很有用。
一般的方法是设置一个具有非常大值的轴线交叉点-在本例中-int。MinValue．
x轴图表底部的负值标签
这个例子展示了如何移动x轴标签到图表的底部，即使有负值-通过一个非常低的y轴交叉点。启用Stack设置将更改带和不带它的栏和列系列测试的0值的行为，以查看差异并选择您喜欢的行为。这个示例展示了如何拥有不堆叠的序列，并触及0值而不是x轴。例如，对于行序列，不需要堆栈设置。*@ @code{//交叉值非常低的值将轴移动到图表公共对象的相应末端[]crossingValues = new对象[]{int。MinValue};public List将值轴向右移动
要确保一个轴始终位于图表的所需一侧，可以设置其对应的边AxisCrossingValue到一个非常大的值，如int。MaxValue或int。MinValue．
这种方法既适用于数值轴也适用于类别轴。下面的示例使用了分类轴。
设置一个非常大的交叉点的示例，使值轴显示在图表的右侧
@*请参阅x轴上的AxisCrossingValue参数及其值——它使用int。MaxValueto push the second value axis all the way to the right *@ @code { public object[] crossingValues = new object[] { 0, int.MaxValue }; public class MyDataModel { public DateTime MySharedCategories { get; set; } public decimal Product1 { get; set; } public decimal Product2 { get; set; } } public List chartData = new List(); protected override void OnInitialized() { var random = new Random(); for (var i = 0; i < 10; i++) { var dateTime = new DateTime(2019, 1, 1); var value1 = Convert.ToDecimal(random.NextDouble() * 10); var value2 = Convert.ToDecimal(random.NextDouble() * 10); this.chartData.Add(new MyDataModel { MySharedCategories = dateTime.AddDays(i), Product1 = value1, Product2 = value2 }); } } }