Lining up multiple RadCartesianChart with DateTimeContinuousAxis

问题

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:

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

回答1:

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

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) });

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

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;

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

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.

来源：https://stackoverflow.com/questions/14288030/lining-up-multiple-radcartesianchart-with-datetimecontinuousaxis

标签

telerik