0

を使用してすべてのグラフを並べたいDateTimeContinuousAxis。タイムスタンプ付きでログに記録されたいくつかの値があります。ファイルを解析し、タイムスタンプごとの値を保存します。Telerikを使用してタイミング図のように見えるように並べる複数のグラフを作成するにはどうすればよいRadChartViewですか？念のために言っておきますが、これは、設定されているスタイルを除いて、実用的に行う必要があります。

考慮すべき点がいくつかあります。

  • ラベルのVerticalAxis文字数が4文字（-900）であるのに対し、2文字（10）の場合、すべてのグラフの縦軸が整列しません。
  • 私が望むようにそれは軸を取り除きます、しかしそれからそれHideはグリッドの右端まで伸びるので、それらは一番下のチャートと整列しませんHorizontalAxis.VisibilityLineSeriesHorizontalAxis

これが私が話していることのスクリーンショットです（そして実際に私はこのスクリーンショットで部分的に修正された垂直軸ラベルを持っています、私がそれをした方法についての答えを見てください）：

ここに画像の説明を入力してください

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

次に、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.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);

これで、ウィンドウの最後のグリッドには、他のグラフと整列する表示された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 に答える