DateTimeContinuousAxis를 사용하여 여러 RadCartesianChart를 정렬하십시오.

Question

DateTimeContinuousAxis을 사용하여 모든 차트를 정렬 해주세요. 타임 스탬프로 기록 된 여러 값이 있습니다. 파일을 구문 분석하고 시간 스탬프 당 값을 저장합니다. 이제 Telerik RadChartView을 사용하여 타이밍 다이어그램처럼 보이게하는 여러 차트를 어떻게 만들 수 있습니까? 이 모든 것들은 설정되어있는 스타일을 제외하고는 모두 실용적으로해야 할 것입니다. VerticalAxis 라벨이을 줄되지 않는 4 자 (-900), 대 2 자 (10), 모든 차트의 수직 축이있는 경우

• 을 : 여기
  은 고려해야 할 몇 가지 것들
• 나는 HorizontalAxis.Visibility 내가 좋아하는 것,하지만 그때 LineSeries 그리드의 오른쪽에있는 모든 방법을 확장 것처럼 축 제거됩니다, 그래서 그들은과 일치하지 않습니다를 Hide 때 가장 아래 차트의 HorizontalAxis

여기

무엇 제가 이야기의 스크린 샷이다 (I 부분적으로이 스크린 샷에 고정 된 수직 축 레이블 일이 실제로하고, 내가 그것을 어떻게했는지에 대한 답을 참조)

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

에 추가됩니다 - 그건 그 때 나는 내로 horizontalAxis이 사라 "해킹"

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

, 창문의 마지막 그리드 다른 차트와 정렬되는 보이는 DateTime 연속 축을 포함합니다.이것은 꽤 해킹입니다, 그래서 그것의 예쁜 또는 개정. 아래는 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> 

질문

은 문의하시기 바랍니다.