我正在寻找一种使用 LiveCharts2 显示具有水平系列的箱形图和须形图而不是默认垂直选项的方法。我找不到任何东西,并选择旋转包含图表的网格,如下所示:
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="1230">
<Grid.LayoutTransform>
<RotateTransform Angle="90"/>
</Grid.LayoutTransform>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0"
Grid.Column="0"
Background="{DynamicResource chartTileColour}"
Margin="10,5,5,5"
CornerRadius="5"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<lvc:CartesianChart Series="{Binding SerieFrictionAngle}"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
XAxes="{Binding XAxes}"
YAxes="{Binding YAxes}"
Height="550"
Width="300"
Margin="20"/>
</Border>
<Border Grid.Row="1"
Grid.Column="0"
Background="{DynamicResource chartTileColour}"
Margin="10,5,5,5"
CornerRadius="5"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<lvc:CartesianChart Series="{Binding SerieCohesion}"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
XAxes="{Binding XAxes}"
YAxes="{Binding YAxes}"
Height="550"
Width="300"
Margin="20"/>
</Border>
<Border Grid.Row="0"
Grid.Column="1"
Background="{DynamicResource chartTileColour}"
Margin="10,5,5,5"
Width="auto"
CornerRadius="5"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<lvc:CartesianChart Series="{Binding SeriePermeability}"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
XAxes="{Binding XAxes}"
YAxes="{Binding YAxes}"
Height="550"
Width="300"
Margin="20"/>
</Border>
<Border Grid.Row="1"
Grid.Column="1"
Background="{DynamicResource chartTileColour}"
Margin="10,5,5,5"
CornerRadius="5"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<lvc:CartesianChart Series="{Binding SerieDryDensity}"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
XAxes="{Binding XAxes}"
YAxes="{Binding YAxes}"
Height="550"
Width="300"
Margin="20"/>
</Border>
</Grid>
每个图表将包含 5 个系列(尾矿、坟墓、沙子、淤泥、粘土)。该系列的填充如下:
public partial class ViewModelStatistics : ObservableObject
{
SqlConnection sqlConnection;
public ObservableValue ObservableValue1 { get; set; }
public ObservableValue ObservableValue2 { get; set; }
int cusPushout = 0;
int cusMaxRad = 20;
int cusInnerRad = 10;
public ISeries[] SerieFrictionAngle { get; set; }
public ISeries[] SerieCohesion { get; set; }
public ISeries[] SeriePermeability { get; set; }
public ISeries[] SerieDryDensity { get; set; }
public ViewModelStatistics()
{
DetermineParameters();
List<double> frictionAngle = DetermineStatistics("Friction Angle");
List<double> cohesion = DetermineStatistics("Cohesion");
List<double> permeability = DetermineStatistics("Permeability");
List<double> dryDensity = DetermineStatistics("Dry Density");
// max, upper quartile, lower quartile, min, median
SerieFrictionAngle = new List<ISeries>
{
new BoxSeries<BoxValue>{Name = "Friction Angle" ,Values = new BoxValue[]{
new(frictionAngle[0], frictionAngle[1], frictionAngle[3], frictionAngle[4], frictionAngle[2]),
new(41.00, 35.00, 30.00, 22.89, 32.67),
new(39.00, 34.00, 30.00, 24.50, 32.14),
new(39.00, 35.00, 30.00, 20.00, 32.89),
new(40.00, 34.70, 28.00, 15.10, 30.76),
}},
}.ToArray();
SerieCohesion = new List<ISeries>
{
new BoxSeries<BoxValue>{Name = "Cohesion" ,Values = new BoxValue[]{
new(cohesion[0], cohesion[1], cohesion[3], cohesion[4], cohesion[2]),
new(),
new(26.90, 3.00, 0.00, 0.00, 0.88),
new(21.00, 9.00, 2.00, 0.00, 5.33),
new(48.90, 10.30, 0.00, 0.00, 5.30),
}},
}.ToArray();
SeriePermeability = new List<ISeries>
{
new BoxSeries<BoxValue>{Name = "Permeability" ,Values = new BoxValue[]{
new(3.50E+06, 3.50E+06, 4.02E+01, 1.68E+04, 1.68E+04),
new(1.12E+07, 2.53E+06, 6.37E+04, 1.60E+03, 1.77E+06),
new(2.40E+08, 2.25E+06, 1.74E+04, 1.49E+03, 5.03E+05),
new(8.89E+06, 3.50E+05, 4.20E+04, 3.90E+04, 7.38E+04),
new(1.29E+07, 1.33E+06, 2.68E+04, 6.80E+03, 4.51E+05),
}},
}.ToArray();
SerieDryDensity = new List<ISeries>
{
new BoxSeries<BoxValue>{Name = "Dry Density" ,Values = new BoxValue[]{
new(dryDensity[0], dryDensity[1], dryDensity[3], dryDensity[4], dryDensity[2]),
new(2125.00, 2006.50, 1772.75, 1578.00, 1897.40),
new(2100.00, 1635.00, 1422.50, 1350.00, 1571.87),
new(2190.00, 1921.00, 1639.00, 1226.00, 1748.97),
new(2190.00, 1744.00, 1370.00, 1216.00, 1531.15),
new(1928.00, 1596.00, 1367.00, 1058.00, 1477.32),
}},
}.ToArray();
}
public Axis[] YAxes { get; set; } =
{
new Axis()
{
Name = "Axis Name",
NameTextSize = 10,
TextSize = 10,
LabelsRotation = -90,
MinLimit = 0,
IsInverted = false,
Position = LiveChartsCore.Measure.AxisPosition.End,
}
};
public Axis[] YAxesPermeability { get; set; } =
{
new LogaritmicAxis(10)
{
Name = "Permeability",
NameTextSize = 10,
TextSize = 10,
LabelsRotation = -90,
//MinLimit = 0,
IsInverted = false,
Position = LiveChartsCore.Measure.AxisPosition.End,
SeparatorsPaint = new SolidColorPaint
{
Color = SKColors.Black.WithAlpha(100),
StrokeThickness = 1,
},
SubseparatorsPaint = new SolidColorPaint
{
Color = SKColors.Black.WithAlpha(50),
StrokeThickness = 0.5f
},
UnitWidth = 0.00001,
SubseparatorsCount = 9,
}
};
public Axis[] XAxes { get; set; } =
{
new Axis()
{
NameTextSize = 10,
TextSize = 10,
Labels = new string[] { "Tailings", "Gravel", "Sand", "Silt", "Clay" },
LabelsRotation = -90,
}
};
public List<double> DetermineStatistics(string columnName)
{
List<double> statisticsList = new List<double>();
// SQL Connection Method 1
sqlConnection = new SqlConnection(App.SQLConnection);
string query = "select * from SoilParametersTable";
SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(query, sqlConnection);
using (sqlDataAdapter)
{
DataTable soilTable = new DataTable();
sqlDataAdapter.Fill(soilTable);
// Filter out non-numeric values and extract numeric values
// from the specified column
var columnValues = soilTable.AsEnumerable()
.Where(row => double.TryParse(row.Field<string>(columnName), out _))
.Select(row => double.Parse(row.Field<string>(columnName)))
.ToList();
// Calculate statistics
double max = columnValues.Max();
double q3 = columnValues.OrderBy(x => x).ElementAt((int)(columnValues.Count() * 0.75));
double mean = columnValues.Average();
double q1 = columnValues.OrderBy(x => x).ElementAt((int)(columnValues.Count() * 0.25));
double min = columnValues.Min();
// Construct list of strings containing the calculated statistics
statisticsList.Add(max);
statisticsList.Add(q3);
statisticsList.Add(mean);
statisticsList.Add(q1);
statisticsList.Add(min);
}
return statisticsList;
}
}
我还需要做一些基本的格式化。我遇到的问题是工具提示仍然处于图表的原始方向(请参阅附加的输出)。我已通读文档,但没有看到任何工具提示旋转属性。我尝试将工具提示放入容器中并旋转它(就像我对图表所做的那样),但这也无法编译。
<Border Grid.Row="1"
Grid.Column="1"
Background="{DynamicResource chartTileColour}"
Margin="10,5,5,5"
CornerRadius="5"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<lvc:CartesianChart Series="{Binding SerieDryDensity}"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
XAxes="{Binding XAxes}"
YAxes="{Binding YAxes}"
Height="550"
Width="300"
Margin="20">
<lvc:CartesianChart.Tooltip>
<DataTemplate>
<Border Background="White" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<TextBlock Text="{Binding FormattedValues[0]}" Margin="5" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<RotateTransform Angle="-45"/>
</TextBlock.RenderTransform>
</TextBlock>
</Border>
</DataTemplate>
</lvc:CartesianChart.Tooltip>
</lvc:CartesianChart>
</Border>
您应该能够使用控件的
Resources
来完成工具提示的旋转。下面我使用 Border
控件执行此操作,该控件应在图表中继承。如果这不起作用,您也应该能够在图表中进行此操作。使用控件的 Resources
的好处是您无需费心重建模板。
<Border.Resources>
<Style TargetType="ToolTip">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45"/>
</Setter.Value>
</Setter>
</Style>
</Border.Resources>