WPF 高效绘制290万数据走势曲线图 - 带水平垂直滚动条 - 常规

WPF 高效绘制290万数据走势曲线图 - 带水平垂直滚动条

本文将详细介绍如何在WPF中使用Canvas和ScrollBar实现高效绘制290万数据走势曲线图，并提供水平垂直滚动条功能，实现滚动加载数据，提高性能。

1. 创建WPF窗口并添加控件

首先，我们需要创建一个WPF窗口，并添加一个Canvas控件用于显示走势曲线图，以及水平和垂直滚动条用于滚动显示数据。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="600" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ScrollBar Name="VerticalScrollBar" Grid.Row="1" Grid.Column="0" Orientation="Vertical" Minimum="0" Maximum="2900000" LargeChange="10000" SmallChange="1000" ValueChanged="VerticalScrollBar_ValueChanged"/>
        <ScrollBar Name="HorizontalScrollBar" Grid.Row="1" Grid.Column="1" Orientation="Horizontal" Minimum="0" Maximum="3600" LargeChange="100" SmallChange="10" ValueChanged="HorizontalScrollBar_ValueChanged"/>
        <Canvas Name="Canvas" Grid.Row="1" Grid.Column="1" Background="White" Width="2900000" Height="3600"/>
    </Grid>
</Window>

2. 实现滚动条滑动事件

在滚动条滑动事件中，我们需要加载新的数据，并更新Canvas上的走势曲线图。

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        private int lastVerticalValue = 0;
        private int lastHorizontalValue = 0;

        public MainWindow()
        {
            InitializeComponent();

            // 初始化数据
            InitData();

            // 显示初始数据
            ShowData(0, 3600);
        }

        private void InitData()
        {
            // TODO: 初始化数据
        }

        private void ShowData(int start, int end)
        {
            // 清空Canvas
            Canvas.Children.Clear();

            // 绘制走势曲线图
            for (int i = start; i < end; i++)
            {
                // 获取数据
                double x = GetDataX(i);
                double y = GetDataY(i);

                // 绘制点
                Ellipse point = new Ellipse();
                point.Width = 4;
                point.Height = 4;
                point.Fill = Brushes.Blue;
                Canvas.SetLeft(point, x - 2);
                Canvas.SetTop(point, y - 2);
                Canvas.Children.Add(point);

                // 绘制线
                if (i > start)
                {
                    Line line = new Line();
                    line.X1 = GetDataX(i - 1);
                    line.Y1 = GetDataY(i - 1);
                    line.X2 = x;
                    line.Y2 = y;
                    line.Stroke = Brushes.Blue;
                    line.StrokeThickness = 1;
                    Canvas.Children.Add(line);
                }
            }
        }

        private double GetDataX(int index)
        {
            // TODO: 获取X轴数据
            return index;
        }

        private double GetDataY(int index)
        {
            // TODO: 获取Y轴数据
            return 3600 - index % 3600;
        }

        private void VerticalScrollBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            int start = (int)e.NewValue;
            int end = start + 3600;

            if (start < lastVerticalValue)
            {
                // 向前滑动，加载前面的数据
                end = start;
                start = end - 3600;
            }
            else if (start > lastVerticalValue)
            {
                // 向后滑动，加载后面的数据
                start = end - 3600;
            }

            if (start < 0)
            {
                start = 0;
                end = start + 3600;
            }

            if (end > 2900000)
            {
                end = 2900000;
                start = end - 3600;
            }

            ShowData(start, end);

            lastVerticalValue = start;
            lastHorizontalValue = 0;

            HorizontalScrollBar.Value = 0;
        }

        private void HorizontalScrollBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            int start = (int)e.NewValue;
            int end = start + 3600;

            if (start < lastHorizontalValue)
            {
                // 向前滑动，加载前面的数据
                end = start;
                start = end - 3600;
            }
            else if (start > lastHorizontalValue)
            {
                // 向后滑动，加载后面的数据
                start = end - 3600;
            }

            if (start < 0)
            {
                start = 0;
                end = start + 3600;
            }

            if (end > 2900000)
            {
                end = 2900000;
                start = end - 3600;
            }

            ShowData(start, end);

            lastHorizontalValue = start;
            lastVerticalValue = 0;

            VerticalScrollBar.Value = 0;
        }
    }
}

3. 优化性能

使用缓存： 可以使用缓存机制，将已经加载的数据缓存起来，避免重复加载。
使用异步加载： 可以使用异步加载的方式加载数据，避免UI线程阻塞。
使用轻量级图形库： 可以使用轻量级图形库，例如OxyPlot，来绘制走势曲线图。

4. 其他优化

可以根据数据量和性能需求调整滚动条的步长和延迟加载机制。
可以添加其他交互功能，例如缩放、平移等。

总结

本文详细介绍了如何在WPF中使用Canvas和ScrollBar实现高效绘制290万数据走势曲线图，并提供水平垂直滚动条功能，实现滚动加载数据，提高性能。开发者可以根据实际需求对代码进行调整和优化，以实现更强大的数据可视化功能。

注意： 本文中的示例代码使用随机生成的数据，实际项目中需要根据具体需求加载实际数据。