DynamicDataDisplay学习之路(二)

时间:2019-01-11
本文章向大家介绍DynamicDataDisplay学习之路(二),主要包括DynamicDataDisplay学习之路(二)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

之前有使用步骤,使用的是源码示例: DynamicDataDisplay学习之路(一)

今天讲讲xaml中用到的东西:

1,绘图仪的主X、Y轴

<!--主X轴刻度[默认显示]-->
<d3:ChartPlotter.MainHorizontalAxis>
    <!--
        常规刻度[默认显示]
            Visibility:是否显示刻度轴[Visible,Hidden]
            ShowMinorTicks:是否显示短刻度线
            Height:刻度轴高度,0就相当于隐藏刻度轴
    -->
    <d3:HorizontalAxis Visibility="Visible"  ShowMinorTicks="False" Height="20"/>

    <!--整数刻度-->
    <!--<d3:HorizontalIntegerAxis/>-->
    <!--时间轴[年月日时分秒]刻度-->
    <!--<d3:HorizontalDateTimeAxis/>
    <!--<d3:HorizontalTimeSpanAxis/>-->
</d3:ChartPlotter.MainHorizontalAxis>

<!--主Y轴刻度[默认显示]-->
<d3:ChartPlotter.MainVerticalAxis>
    <d3:VerticalAxis Visibility="Hidden"/>
</d3:ChartPlotter.MainVerticalAxis>

2,标题

<!--绘图仪主标题-->
<d3:Header TextBlock.FontSize="20">Very simple chart</d3:Header>
<!--Y轴标题-->
<d3:VerticalAxisTitle>Sine value</d3:VerticalAxisTitle>
<!--X轴标题-->
<d3:HorizontalAxisTitle>Sine argument</d3:HorizontalAxisTitle>

3,常数线

<!--
    垂直于Y轴
        Value:对应的Y轴刻度值
        Stroke:画线的颜色
        StrokeThickness:画线的厚度
        StrokeDashArray:画虚线
-->
<d3:HorizontalLine Value="1" Stroke="Aqua" StrokeThickness="1" StrokeDashArray="4,5" />
<!--垂直于X轴-->
<d3:VerticalLine />

4,十字光标

<!-- 
    十字光标 
        默认显示数值,尽管坐标轴是时间轴也是数值,
        想要出现时间类型,需在CS类中更改显示的字符串
-->
<d3:CursorCoordinateGraph />

CursorCoordinateGraph 显示时间:可借鉴:在cs类中更改显示字符串  ,修改源代码来实现 横坐标显示日期

5,数据跟随图【DataFollowChart】

在源代码示例 【LineTestSample】中有演示跟代码

<d3:ChartPlotter Name="plotter" Margin="0,5,0,0">                
    <d3:LineGraph Name="lineGraph" Stroke="OrangeRed" StrokeThickness="1"/>

    <d3:VerticalLine x:Name="vLine1" Value="{Binding ElementName=dataFollowChart, Path=MarkerPosition.X}" StrokeThickness="2" Stroke="Violet" StrokeDashArray="4,5" IsEnabled="False" />
    <d3:HorizontalLine x:Name="hLine1" Value="{Binding ElementName=dataFollowChart, Path=MarkerPosition.Y}" StrokeThickness="2" Stroke="Violet" StrokeDashArray="4,5" IsEnabled="False" />

    <d3:DataFollowChart Name="dataFollowChart" PointSource="{Binding ElementName=lineGraph}" >
        <DataTemplate>
            <Grid d3:ViewportPanel.ScreenOffsetY="16">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Rectangle RadiusX="3" RadiusY="3" Stroke="LightGray" Fill="#99FFFFFF" Grid.Row="0" Grid.RowSpan="2"/>
                <Ellipse Width="10" Height="10" Fill="LightGreen" Stroke="Green" Grid.Row="0"/>
                <TextBlock Name="tb" Margin="2,15,2,0" Grid.Row="1">
                    <TextBlock Text="{Binding Position.X, StringFormat=G3}"/>;
                    <TextBlock Text="{Binding Position.Y, StringFormat=G3}"/>
                </TextBlock>
            </Grid>
        </DataTemplate>
    </d3:DataFollowChart>               
</d3:ChartPlotter>