如何处理在 IndependentValues 和dependentValues 中不断扩展的折线图

问题描述

如何处理每10分钟不断扩展的Independent和dependentValuePath?包含 ScrollViewer 会处理这种情况吗?

How to handle the Independent and dependentValuePath that keep expanding in every 10 minutes?Will including ScrollViewer handle this scenario?

假设，下面是使用的图表:

Suppose, below is the chart in use:

<Charting:LineSeries Title="station1" Margin="0" FontSize="16" FontWeight="SemiBold" IndependentValuePath="Q_interval" DependentValuePath="Q_size" IsSelectionEnabled="True">

  <Charting:LineSeries Title="Terminal 1" Margin="10" FontSize="16" Foreground="Blue"  FontWeight="SemiBold" Foreground="Purple" BorderBrush="Red"  IndependentValuePath="Q_interval" DependentValuePath="Q_size" IsSelectionEnabled="True">
    <Charting:LineSeries.DataPointStyle>
      <Style TargetType="Charting:LineDataPoint">
        <Setter Property="Width" Value="20" />
        <Setter Property="Height" Value="20" />
        <Setter Property="Background" Value="Blue"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
      </Style>
    </Charting:LineSeries.DataPointStyle>
  </Charting:LineSeries>
</Charting:Chart>

推荐答案

您可以使用 DispatherTimer每 10 分钟控制一次 independent 和 dependent 值.

You can use a DispatherTimer to control the independent and dependent value every 10 minutes.

是否包含 ScrollViewer 会处理这种情况?

WinRTXamlToolKit 中的

LineChat 可以自动排列轴，不需要让 ScrollViewer 处理.

LineChat in WinRTXamlToolKit can arrange the axis automatically, you don't need to let a ScrollViewer handle it.

这是关于每 2 秒扩展 independent 和 dependent 的完整演示.

Here is the completed demo about expanding the independent and dependent every 2 seconds.

XAML 代码

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <charting:Chart
        x:Name="LineChart"
        Title="Line Chart"
        Margin="70,0"
        Foreground="Red"
        FontSize="10">
        <charting:LineSeries
            x:Name="line1"
            Title="Population in 2005"
            DependentValueBinding="{Binding Value}"
            IndependentValueBinding="{Binding Name}"
            IsSelectionEnabled="True" />
    </charting:Chart>

背后的代码，

public sealed partial class NewChart : Page
{
    private Random _random = new Random();
    private EventThrottler _updateThrottler = new EventThrottler();
    private readonly DispatcherTimer _timer;
    private int total = 1;
    public NewChart()
    {
        this.InitializeComponent();
        _timer = new DispatcherTimer
        {
            Interval = TimeSpan.FromSeconds(2)
        };
        _timer.Tick += AddlineChat;
        _timer.Start();
    }

    private void AddlineChat(object sender, object e)
    {
        total += 1;
        _updateThrottler.Run(
            async () =>
            {
                var sw = new Stopwatch();
                sw.Start();
                this.UpdateCharts(total);
                sw.Stop();
                await Task.Delay(sw.Elapsed);
            });
    }

    private void RunIfSelected(UIElement element, Action action)
    {
        action.Invoke();
    }
    private void UpdateCharts(int n)
    {
        var items1 = new List<NameValueItem>();
        var items2 = new List<NameValueItem>();
        var items3 = new List<NameValueItem>();
        for (int i = 0; i < n; i++)
        {
            items1.Add(new NameValueItem { Name = "Name" + i, Value = _random.Next(10, 100) });
        }
        this.RunIfSelected(this.LineChart, () => ((LineSeries)this.LineChart.Series[0]).ItemsSource = items1);
    }
}

public class NameValueItem
{
    public string Name { get; set; }
    public int Value { get; set; }
}

将我的演示分享到 GitHub，请参阅此处.

Shared my demo to GitHub, please see here.

这篇关于如何处理在 IndependentValues 和dependentValues 中不断扩展的折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！