【原创】DynamicDataDisplay 添加数据跟随

目录

库版本

需求描述 

解决方案

代码实现

效果图

总结

【END】

---

库版本

DynamicDataDisplay/1.0

需求描述 

希望用户鼠标移动的时候，可以在曲线上呈现数据追随效果，方便查看数据

解决方案

学习DynamicDataDisplay源代码LineTestSample案例，进行改造

代码实现

CurrentTem1：LineGraph类型的线

<!--数据跟随-->
<d3:DataFollowChart Name="dataFollowChart" PointSource="{Binding ElementName=CurrentTem1}">
    <DataTemplate>
        <!--跟踪点位置精调-->
        <Grid d3:ViewportPanel.ScreenOffsetY="23">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Rectangle RadiusX="3" RadiusY="3" Stroke="#00DEFF"  StrokeThickness="2"  Fill="#99F0FFD4" Grid.Row="0" Grid.RowSpan="2"/>
            <Ellipse Width="10" Height="10" Fill="LightGreen" Stroke="Green" Grid.Row="0"/>
            <TextBlock Name="tb" Margin="10,10,10,10" Grid.Row="1"><TextBlock Text="{Binding Position.Y, StringFormat={}{0:####.#} ℃}" Foreground="Red" FontSize="22" /></TextBlock>
        </Grid>
    </DataTemplate>
</d3:DataFollowChart>

效果图

总结

可以根据实际需求，适当更改数据框及定位点的大小、颜色、填充色等属性；

【END】