使用DateTimeContinuousAxis排除多个RadCartesianChart

Question

我希望我的所有图表都使用DateTimeContinuousAxis排列。我有几个值记录时间戳。我解析文件并存储每个时间戳的值。现在，我如何创建几个排列的图表，就像使用Telerik RadChartView看起来像时序图一样？请注意，除了设置的任何样式外，这一切都需要务实地完成。

以下是需要考虑的事项：

• 当VerticalAxis标签有4个字符（-900），而2个字符（10）时，所有图表的垂直轴都没有排列
• 当我Hide HorizontalAxis.Visibility时它会像我想的那样摆脱轴，但是LineSeries一直延伸到网格的右侧，所以他们不会t排在最底部的图表HorizontalAxis

这是我正在谈论的截图（实际上我在此屏幕截图中部分修复了垂直轴标签的内容，请参阅我是如何做到的答案）：

Answer 1

首先，您已将每个图表添加到网格中。以下是我的XAML的相似之处：

<Grid Name="layout" />

接下来我初始化并设置我的循环中的一对（并非所有显示的）组件 - 迭代我想要绘制的集合或值 - 我将添加到网格/图表

LineSeries lineSeries = new LineSeries();
lineSeries.VerticalAxis = new LinearAxis() 
{ //set additional properties here 
    LabelStyle = Resources["AdjustedLabelVerticalAxis"] as Style
};

lineSeries.ItemsSource = collection.Values;
lineSeries.CategoryBinding = new PropertyNameDataPointBinding() { PropertyName = "Date" };
lineSeries.ValueBinding = new PropertyNameDataPointBinding() { PropertyName = "Value" };

RadCartesianChart chart = new RadCartesianChart();

chart.HorizontalAxis = new DateTimeContinuousAxis() { LabelFormat = "HH:mm:ss" };
chart.Series.Add(lineSeries);

然后我“破解”我的Horizo​​ntalAxis消失了：

chart.HorizontalAxis.MajorTickStyle = Resources["HideTicksHorizontalAxis"] as Style;
chart.HorizontalAxis.LabelStyle = Resources["HideShiftHorizontalAxisLabel"] as Style;
chart.HorizontalAxis.LineThickness = 0;

现在我们需要以编程方式在循环结束时将图表添加到网格中，因此每个图表都在它们自己的行中，这有助于自动调整大小。

layout.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(chart.MinHeight, GridUnitType.Star) });

接下来，我们在Grid中设置我们想要放置图表的行，然后添加它：

Grid.SetRow(chart, i); //where i is the loop counter
layout.Children.Add(chart);

循环完成后，我们将collection中的所有图表都放到网格中，没有水平轴标记。我们需要一个DateTimeContinousAxis，所以让我们变得狡猾。

我们首先需要添加最后一行，因为我们要创建另一个图表并填充相同的数据，然后隐藏并调整所有内容。

所以在我的循环之外我做了：

layout.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(30) }); //add last row
DateTimeContinuousAxis graph = new DateTimeContinuousAxis();
graph.MinHeight = 12;
graph.Maximum = collection.Values[collection.Values.Count - 1].Date; //max/min DateTime values
graph.Minimum = collection.Values[0].Date;

graph.LabelInterval = 2;
graph.MaximumTicks = 3;
graph.LabelFormat = "hh:mm:ss";
graph.MajorStepUnit = Telerik.Charting.TimeInterval.Second;
graph.LineThickness = 1;

然后继续制作极简主义LinearAxis，LineSeries和RadCartesianChart

LinearAxis axis = new LinearAxis();
LineSeries ls = new LineSeries();
RadCartesianChart blankChart = new RadCartesianChart();

ls.ItemsSource = collection.Values;  //Set up for binding
ls.CategoryBinding = new PropertyNameDataPointBinding() { PropertyName = "Date" };
ls.ValueBinding = new PropertyNameDataPointBinding() { PropertyName = "Value" };
ls.Visibility = System.Windows.Visibility.Hidden; //hide the line from being plotted

axis.LabelStyle = Resources["TextBlockStyle2"] as Style;
axis.Opacity = 0; //make it invisible
axis.MinHeight = 0; //make it able to resize to 0 if ever needed

blankChart.MinHeight = 0; 
blankChart.HorizontalAxis = graph;
blankChart.VerticalAxis = axis;

blankChart.Series.Add(ls);
Grid.SetRow(blankChart, collection.Count);
layout.Children.Add(blankChart);

你有它，你窗口中的最后一个Grid将只包含一个可见的DateTimeContinuous轴，它将与你的其他图表对齐。这是非常黑客，所以它不是最漂亮的或修改过的。下面是可以在XAML中使用的样式以及最终结果。

<Style x:Key="AdjustedLabelVerticalAxis" TargetType="{x:Type TextBlock}">
    <Setter Property="Width" Value="30"/>
    <Setter Property="Margin" Value="0,0,2,0"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="TextAlignment" Value="Right"/>
</Style>
<Style x:Key="HideShiftHorizontalAxisLabel" TargetType="{x:Type TextBlock}">
    <Setter Property="Margin" Value="4,-15,4,0"/>
    <Setter Property="Foreground" Value="Transparent"/>
</Style>
<Style x:Key="HideTicksHorizontalAxis" TargetType="{x:Type Rectangle}">
    <Setter Property="Visibility" Value="Hidden"/>
</Style>

有任何问题，请询问。