Livecharts中的视觉元素？

Question

我想在5秒的时间内将一条垂直线从笛卡尔图表的开头移动到结尾。我尝试查看网站https://lvcharts.net/App/examples/v1/wpf/Visual%20Elements中提供的示例，但图形中的UI元素与代码不匹配。

当我尝试将这条线直接添加到图表中时，这条线工作正常，但图表不显示。

<lvc:CartesianChart Name="CartChart" Height="150" Zoom="Xy" Pan="Xy">

    <lvc:CartesianChart.Series>
        <lvc:LineSeries Values="{Binding audioPoints}" StrokeThickness="1" PointGeometry="{x:Null}" Visibility="Visible" />
    </lvc:CartesianChart.Series>

    <Line x:Name="anotherLine" Stroke="Black" Height="160" X1="0"X2="0" Y1="0" Y2="160"/>

</lvc:CartesianChart>

Answer 1

我找到了这个代码示例，我认为它将演示您需要做的事情。您应该能够将其中的大部分内容转换为数据绑定和xaml。

需要注意的是，您向CartesianChart上的VisualElements集合添加了一个VisualElement。将VisualElement对象的UIElement属性设置为要添加到图表中的WPF控件。

https://lvcharts.net/App/examples/v1/wf/Visual%20Elements

    cartesianChart1.VisualElements.Add(new VisualElement
    {
        X = 0.5,
        Y = 7,
        HorizontalAlignment = HorizontalAlignment.Center,
        VerticalAlignment = VerticalAlignment.Top,
        UIElement = new TextBlock //notice this property must be a wpf control
        {
            Text = "Warning!",
            FontWeight = FontWeights.Bold,
            FontSize = 16,
            Opacity = 0.6
        }
    });

    cartesianChart1.VisualElements.Add(new VisualElement()
    {
            X=0,
            Y=myCalculatedValue,
            UIElement = new Rectangle()
            {
                Width= width,
                Margin= new Thickness(-seriesWidth/2, 0, 0, 0),
                Height=6,
                Fill=Brushes.Black,
                VerticalAlignment = VerticalAlignment.Top
            }
    });