0

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

这里有一些要考虑的事情：

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

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

在此处输入图像描述

4

1 回答 1

2

首先，您已将每个图表添加到网格中。这是我的 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);

然后我“破解”我的水平轴消失：

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>

在此处输入图像描述

有任何问题，请提出。

于 2013-01-11T22:58:44.187 回答