使用 DateTimeContinuousAxis 排列多个 RadCartesianChart [英] Lining up multiple RadCartesianChart with DateTimeContinuousAxis

问题描述

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

I want all of my charts to line up using the DateTimeContinuousAxis. I have several values logged with a time stamp. I parse the file and store the values per time stamp. Now how can I create several charts that will line up as if it were to look like a timing diagram using Telerik RadChartView? Mind you, this all will need to be done pragmatically aside from any styles that are set.

以下是一些需要考虑的事项:

Here are some things to consider:

• 当 VerticalAxis 标签有 4 个字符 (-900) 与 2 个字符 (10) 时，所有图表的垂直轴未对齐
• 当我 Hide Horizo​​ntalAxis.Visibility 它像我想要的那样摆脱了轴，但是 LineSeries 一直延伸在网格的右侧，因此它们不会与最底部图表的 Horizo​​ntalAxis
对齐

• when the VerticalAxis label has 4 characters (-900), vs. 2 characters (10), the vertical axis of all the charts aren't lined up
• when I Hide the HorizontalAxis.Visibility it gets rid of the axis like I would like, but then the LineSeries extends all the way to the right of the grid, so they don't line up with the bottom-most chart's HorizontalAxis

这是我正在谈论的内容的屏幕截图(实际上我在此屏幕截图中部分固定了垂直轴标签，请参阅有关我如何做到的答案):

Here is a screenshot of what I'm talking about (and actually I have the vertical axis label thing partially fixed in this screenshot, see the answer on how I did it):

推荐答案

首先，您已将每个图表添加到网格中.这是我的 XAML 的样子:

First thing is first, you have add each of your charts to the grid. Here is what my XAML looks like for that:

<Grid Name="layout" />

接下来，我在循环内初始化并设置了几个(未全部显示)组件——循环访问我想要绘制的集合或值——我将添加到网格/图表中

Next I initialize and setup a couple (not all are shown) components inside of my loop--that iterates through the collection or values that I want to chart--that I will be adding to the Grid/Chart

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 使其消失:

Then I "hack" my HorizontalAxis to disappear:

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

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

Now we need to programmatically add the chart to the grid at the end of the loop, so each chart is in their own row, which helps for auto-resizing.

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

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

Next we set what row in the Grid we want to put the chart, and add it:

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

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

When the loop is done, we have all our charts in the collection to the grid, with no horizontal axes labeling. We need an DateTimeContinousAxis, so lets get crafty.

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

We first need to add the very last row, because we are going to create another chart and populate the same data, but then hide and adjust everything.

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

So outside of my loop I did:

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

Then go on to create a minimalist LinearAxis, LineSeries, and 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);

您已经知道了，窗口中的最后一个网格将只包含一个可见的 DateTimeContinuous 轴，该轴将与您的其他图表对齐.这是相当的黑客，所以它不是最漂亮的或修改过的.下面是可以在您的 XAML 中使用的样式以及最终结果.

There you have it, the last Grid in your window will contain just a visible DateTimeContinuous axis that will line up with your other charts. This is quite the hack, so its not the prettiest or revised. Below is the Styles that can be used in your XAML as well as the final result.

<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>

有任何问题，欢迎提问.

Any questions, please ask.

这篇关于使用 DateTimeContinuousAxis 排列多个 RadCartesianChart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！