c# - 将平均线、最小线和最大线添加到散点图

Question

我在 wpf、C#、.NET 3.5 中使用 ScatterDataPoint 图表，我必须为最小值、最大值和平均值线添加 3 条水平线，它们可能会有所不同，具体取决于我设置的值介绍一下。

基本上我从数据库中获取一些值，我必须将它们显示在图表中，下面是我开始创建应用程序的基本代码，但我不知道要添加这 3 行。

这是 XAML 代码:

 <Window.Resources>
        <Style x:Key="BubbleDataPointStyle" TargetType="chartingToolkit:ScatterDataPoint">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="chartingToolkit:ScatterDataPoint">
                        <Viewbox x:Name="viewbox">
                            <Ellipse Width="1px" Height="1px" Fill="Black"/>
                        </Viewbox>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Width" Value="3"/>
            <Setter Property="Height" Value="3"/>
        </Style>
    </Window.Resources>
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,-28,0,28">
            <Grid Height="921" Background="WhiteSmoke">
                <chartingToolkit:Chart Name="lineChart" Title="Power Graph" Background="WhiteSmoke" Foreground="Black" VerticalAlignment="Top" Margin="16,36,20,0" Height="800"  IsEnabled="True">
                    <chartingToolkit:ScatterSeries Title="Points" ItemsSource="{Binding}"  DependentValueBinding="{Binding Path=Value}" IndependentValueBinding="{Binding Path=Key}" IsSelectionEnabled="True" DataPointStyle="{StaticResource BubbleDataPointStyle}">

                        <chartingToolkit:ScatterSeries.IndependentAxis>
                            <chartingToolkit:LinearAxis Orientation="X" Title="Time (Mins)" Interval="5"  />
                        </chartingToolkit:ScatterSeries.IndependentAxis>
                        <chartingToolkit:ScatterSeries.DependentRangeAxis>
                            <chartingToolkit:LinearAxis Orientation="Y" Title="Lenght" x:Name="Yaxis"/>
                        </chartingToolkit:ScatterSeries.DependentRangeAxis>
                    </chartingToolkit:ScatterSeries>
                </chartingToolkit:Chart>  
            </Grid>
        </ScrollViewer>
    </Grid>
</Window>

这是后面的代码，现在它只是生成一个随机点:

 public partial class MainWindow : Window
    {
        DispatcherTimer timer = new DispatcherTimer();
        ObservableCollection<KeyValuePair<double, double>> Power = new ObservableCollection<KeyValuePair<double, double>>();
        public MainWindow()
   `enter code here`     {
            InitializeComponent();
            showColumnChart();

            timer.Interval = new TimeSpan(0,0,0,0,1);  // per 5 seconds, you could change it
            timer.Tick += new EventHandler(timer_Tick);
            timer.IsEnabled = true;

        }


        double i = 1;
        Random random = new Random();
        void timer_Tick(object sender, EventArgs e)
        {

         Power.Add(new KeyValuePair<double, double>(i, random.NextDouble()));
                i += 1;

                if(Power.Count==500)
            {
                timer.IsEnabled = false;

            }

        }

        private void showColumnChart()
        {
            lineChart.DataContext = Power;
        }

    }
}

Answer 1

通常您会为此使用StripLine，但工具包似乎没有。所以使用额外的 LineSeries 代替:

XAML:

<Window x:Class="WpfApplication336.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:local="clr-namespace:WpfApplication336"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Style x:Key="BubbleDataPointStyle" TargetType="chartingToolkit:ScatterDataPoint">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chartingToolkit:ScatterDataPoint">
                    <Viewbox x:Name="viewbox">
                        <Ellipse Width="1px" Height="1px" Fill="Black"/>
                    </Viewbox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width" Value="3"/>
        <Setter Property="Height" Value="3"/>
    </Style>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="10*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <chartingToolkit:Chart Grid.Row="0" Name="lineChart" Title="Power Graph" Background="WhiteSmoke" Foreground="Black"  IsEnabled="True">

        <chartingToolkit:Chart.Series>

            <chartingToolkit:ScatterSeries Title="Points" ItemsSource="{Binding Power}"  DependentValueBinding="{Binding Path=Value}" IndependentValueBinding="{Binding Path=Key}" IsSelectionEnabled="True" DataPointStyle="{StaticResource BubbleDataPointStyle}"/>
            <chartingToolkit:LineSeries Title="Average" ItemsSource="{Binding PowerAvg}"  DependentValueBinding="{Binding Path=Value}" IndependentValueBinding="{Binding Path=Key}" />

        </chartingToolkit:Chart.Series>

    </chartingToolkit:Chart>

    <Button Grid.Row="1" Click="Button_Click">START</Button>
</Grid>

View 模型:

public class MyViewModel
{
    public ObservableCollection<KeyValuePair<double, double>> Power { get; set; }
    public ObservableCollection<KeyValuePair<double, double>> PowerAvg { get; set; }

    public MyViewModel()
    {
        Power = new ObservableCollection<KeyValuePair<double, double>>();
        PowerAvg = new ObservableCollection<KeyValuePair<double, double>>();
    }

    public void Add(double x, double y)
    {
        Power.Add(new KeyValuePair<double, double>(x, y));

        double xmin = Power.Min(kvp => kvp.Key);
        double xmax = Power.Max(kvp => kvp.Key);

        double ymin = Power.Min(kvp => kvp.Value);
        double ymax = Power.Max(kvp => kvp.Value);
        double yavg = Power.Average(kvp => kvp.Value);

        PowerAvg.Clear(); 
        PowerAvg.Add(new KeyValuePair<double, double>(xmin, yavg));
        PowerAvg.Add(new KeyValuePair<double, double>(xmax, yavg));
    }
}

主窗口:

public partial class MainWindow : Window
{
    DispatcherTimer timer = new DispatcherTimer();
    MyViewModel vm;

    public MainWindow()
    {
        InitializeComponent();

        vm = new MyViewModel();
        DataContext = vm;

        //showColumnChart();

        timer.Interval = new TimeSpan(0, 0, 0, 0, 1);  // per 5 seconds, you could change it
        timer.Tick += new EventHandler(timer_Tick);
        //timer.IsEnabled = true;
    }


    double i = 1;
    Random random = new Random();
    void timer_Tick(object sender, EventArgs e)
    {

        vm.Add(i, random.NextDouble());
        i += 1;

        if (vm.Power.Count == 250)
        {
            timer.Stop();

        }

    }

    private void showColumnChart()
    {
        lineChart.DataContext = vm;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        timer.Start();
    }
}

您可以轻松地为最小值和最大值添加额外的 LineSeries，就像我们为平均值所做的那样。