WPF:尝试使用实时数据填充我的图表

时间:2015-06-17 07:11:53

标签: wpf charts real-time

这是我计算网络流量的模型:

public NetworkStatistics
{
     public static double trafficrate;

     public void start
     {
          trafficrate = ... // here my static variable gets all the rate
     }
}

这是我的图表:

<chartingToolkit:Chart Name="lineChart" Margin="16,90,30,483" Background="Transparent">
            <chartingToolkit:LineSeries Name="chartSeries" 
                 ItemsSource="{Binding}" IsSelectionEnabled="True" Margin="0,-37,0,37" >
                <chartingToolkit:LineSeries.Template>
                    <ControlTemplate TargetType="chartingToolkit:LineSeries">
                        <Canvas x:Name="PlotArea">
                            <Polyline x:Name="polyline"
                                          Points="{TemplateBinding Points}" 
                                          Stroke="Yellow" 
                                          Style="{TemplateBinding PolylineStyle}" />
                        </Canvas>
                    </ControlTemplate>
                </chartingToolkit:LineSeries.Template>
            </chartingToolkit:LineSeries>
        </chartingToolkit:Chart>

在我的application constructor我启动了统计信息启动方法,值trafficrate开始获取值。

这是我的timer tick event使用它我希望每隔一秒填充一次chart

private void dispatcherTimer_Tick(object sender, EventArgs e)
{
    double rate = NetworkStatistics.trafficrate;
    chartSeries.Points.Add(new Point(DateTime.Now, rate));
}

但没有任何事情发生。 顺便说一下,我怎么只能插入一个需要2个值的value而不是Point

修改

public MainWindow()
{
    InitializeComponent();

    points = new ObservableCollection<KeyValuePair<int, int>>();
    points.Add(new KeyValuePair<int, int>(1, 60));
    points.Add(new KeyValuePair<int, int>(2, 20));
    points.Add(new KeyValuePair<int, int>(3, 50));
    points.Add(new KeyValuePair<int, int>(4, 30));
    points.Add(new KeyValuePair<int, int>(5, 40));
    points.Add(new KeyValuePair<int, int>(6, 200));
    points.Add(new KeyValuePair<int, int>(7, 1));
    points.Add(new KeyValuePair<int, int>(8, 450));
    points.Add(new KeyValuePair<int, int>(4, 30));
    points.Add(new KeyValuePair<int, int>(5, 40));
    this.DataContext = this;

    CreateTimer();
}

    public void CreateTimer()
    {
        DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer();
        dispatcherTimer.Tick += dispatcherTimer_Tick;
        dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 333);
        dispatcherTimer.Start();
    }

    private void dispatcherTimer_Tick(object sender, EventArgs e)
    {
        int pos = 300;
        var r = new Random();
        for (int i = 0; i < 1000; i++)
        {
            points.Add(new KeyValuePair<int, int>(i, r.Next(1000)));
        }
    }

我的XAML

<Grid>
            <Grid.Resources>
                <Style x:Key="EmptyPointsStyle" TargetType="{x:Type chartingToolkit:LineDataPoint}">
                    <Setter Property="Template" Value="{x:Null}"/>
                </Style>

                <Style TargetType="{x:Type chartingToolkit:LineSeries}">
                    <Setter Property="DataPointStyle" Value="{StaticResource EmptyPointsStyle}"/>
                    <Setter Property="PolylineStyle">
                        <Setter.Value>
                            <Style TargetType="{x:Type Polyline}">
                                <Setter Property="StrokeThickness" Value="2"/>
                                <Setter Property="StrokeMiterLimit" Value="1"/>
                            </Style>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
                                <Canvas x:Name="PlotArea">
                                    <Polyline Stroke="{TemplateBinding BorderBrush}" Style="{TemplateBinding PolylineStyle}" Points="{TemplateBinding Points}"/>
                                </Canvas>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Grid.Resources>
            <chartingToolkit:Chart  Name="lineChart" Title="Line Series Demo" VerticalAlignment="Top" Margin="50" Height="254">
                <chartingToolkit:LineSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding points}" IsSelectionEnabled="True"/>
            </chartingToolkit:Chart>
        </Grid>

1 个答案:

答案 0 :(得分:0)

要使用LineSeries和PolyLines,我使用以下XAML:

<Window x:Class="WPFToolkitProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    Title="MainWindow" Height="350" Width="525" Loaded="MainWindow_OnLoaded">
<Grid>
    <Grid.Resources>
        <Style x:Key="EmptyPointsStyle" TargetType="{x:Type chartingToolkit:LineDataPoint}">
            <Setter Property="Template" Value="{x:Null}"/>
        </Style>

        <Style TargetType="{x:Type chartingToolkit:LineSeries}">
            <Setter Property="DataPointStyle" Value="{StaticResource EmptyPointsStyle}"/>
            <Setter Property="PolylineStyle">
                <Setter.Value>
                    <Style TargetType="{x:Type Polyline}">
                        <Setter Property="StrokeThickness" Value="2"/>
                        <Setter Property="StrokeMiterLimit" Value="1"/>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
                        <Canvas x:Name="PlotArea">
                            <Polyline Stroke="{TemplateBinding BorderBrush}" Style="{TemplateBinding PolylineStyle}" Points="{TemplateBinding Points}"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <chartingToolkit:Chart  Name="lineChart" Title="Line Series Demo" VerticalAlignment="Top" Margin="50" Height="254">
        <chartingToolkit:LineSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding points}" IsSelectionEnabled="True"/>
    </chartingToolkit:Chart>
</Grid>

以下是代码背后:        public partial class MainWindow:Window     {         public ObservableCollection&gt;积分{得;组; }

    public MainWindow()
    {
        InitializeComponent();
        points = new ObservableCollection<KeyValuePair<int, int>>();
        points.Add(new KeyValuePair<int, int>(1, 60));
        points.Add(new KeyValuePair<int, int>(2, 20));
        points.Add(new KeyValuePair<int, int>(3, 50));
        points.Add(new KeyValuePair<int, int>(4, 30));
        points.Add(new KeyValuePair<int, int>(5, 40));
        points.Add(new KeyValuePair<int, int>(6, 200));
        points.Add(new KeyValuePair<int, int>(7, 1));
        points.Add(new KeyValuePair<int, int>(8, 450));
        points.Add(new KeyValuePair<int, int>(4, 30));
        points.Add(new KeyValuePair<int, int>(5, 40));

        this.DataContext = this;
    }


    private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)
    {
        #region Adding points at runtime - test

        Task.Run(() =>
        {

            System.Threading.Thread.Sleep(5000);

            int pos = 300;
            var r = new Random();

            for (int i = 0; i < 1000; i++)
            {
                Dispatcher.Invoke(() =>
                {
                    points.Add(new KeyValuePair<int, int>(i, r.Next(1000)));

                });
                System.Threading.Thread.Sleep((100));
            }
        });

        #endregion Adding points at runtime - test
    }
}

更新工作正常,我认为视觉表现足够快。