Scichart简单做图范例一

使用了C#在WPF模式下，使用Scichart非常简单

实现了鼠标拖动，Zoom in out, 游标查询这几个基本功能

仅仅创建了2条曲线，实验了1千万个点的数据, 16G内存的win11系统, debug模式下,程序运行后,内存占用大约800M, 拖动缩放非常丝滑.

记录了下学习过程

XAML:

<Window x:Class="WpfApp2.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:local="clr-namespace:WpfApp2"
        xmlns:SciChart="http://schemas.abtsoftware.co.uk/scichart"
        mc:Ignorable="d"
        Title="MainWindow" Height="499" Width="800">
    <Grid>
        <SciChart:SciChartSurface x:Name="sciChart" Margin="10,10,10,50">
            <!--
            <SciChart:SciChartSurface.RenderableSeries>
                
                <SciChart:FastLineRenderableSeries x:Name="lineSeries1"/>
                <SciChart:FastLineRenderableSeries x:Name="lineSeries2"/>
               
            </SciChart:SciChartSurface.RenderableSeries>  -->

            <SciChart:SciChartSurface.XAxis>
                <SciChart:NumericAxis>
                    <SciChart:NumericAxis.Style>
                        <Style TargetType="SciChart:AxisBase">
                            <Setter Property="BorderBrush" Value="White"/>
                            <Setter Property="BorderThickness" Value="1"/>
                        </Style>
                    </SciChart:NumericAxis.Style>
                </SciChart:NumericAxis>
            </SciChart:SciChartSurface.XAxis>

            <SciChart:SciChartSurface.YAxis>
                <SciChart:NumericAxis/>
            </SciChart:SciChartSurface.YAxis>

            <!-- Add Zooming, Panning behaviours to the chart -->
            <!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
            <SciChart:SciChartSurface.ChartModifier>
                <SciChart:ModifierGroup>
                    <!-- Allow drag to zoom on Left mouse -->
                    <SciChart:RubberBandXyZoomModifier ExecuteOn="MouseLeftButton"
                                                 RubberBandFill="#33FFFFFF" RubberBandStroke="#AAFFFFFF"
                                                 RubberBandStrokeDashArray="2 2"/>
                    <!-- Allow pan on Right mouse drag -->
                    <SciChart:ZoomPanModifier ExecuteOn="MouseRightButton" ClipModeX="None" />
                    <!-- Allow Dragging YAxis to Scale -->
                    <SciChart:YAxisDragModifier DragMode="Scale"/>
                    <!-- Allow Dragging XAxis to Pan -->
                    <SciChart:XAxisDragModifier DragMode="Pan"/>
                    <!-- Allow Mousewheel Zoom -->
                    <SciChart:MouseWheelZoomModifier/>
                    <SciChart:RolloverModifier x:Name="rolloverModifier" />
                </SciChart:ModifierGroup>
            </SciChart:SciChartSurface.ChartModifier>

            <SciChart:SciChartSurface.Annotations>
                <SciChart:TextAnnotation Text="Hello world!" X1="5.0" Y1="5"/>
            </SciChart:SciChartSurface.Annotations>

        </SciChart:SciChartSurface>

        <Button Content="Toggle Line Series 1 Visibility" Click="OnButtonClick" VerticalAlignment="Top" HorizontalAlignment="Right"/>
        <Button Content="游标查询" Click="On游标查询Click" VerticalAlignment="Bottom"  HorizontalAlignment="Left" />
    </Grid>
</Window>

XAML.CS

using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Visuals.Axes;
using SciChart.Charting.Visuals.RenderableSeries;
using SciChart.Charting.Visuals;
using SciChart.Data.Model;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Interop;
using SciChart.Core.Extensions;
using SciChart.Charting.Visuals.Annotations;
using SciChart.Charting.ChartModifiers;
using SciChart.Charting.Visuals.PointMarkers;
using SciChart.Drawing.Common;

namespace WpfApp2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private FastLineRenderableSeries lineSeries1; // 将lineSeries1作为一个字段
        private XyScatterRenderableSeries lineSeries2;
        private VerticalLineAnnotation 游标垂直线;

        private IRange initialXRange;
        private IRange initialYRange;

        private bool is游标查询可见 = false;
        public MainWindow()
        {         

            //这一句还必须有，在我I5-11300H的集显上（也不知道是否启用了MX450），不加这一句，缩放出错
            RenderOptions.ProcessRenderMode = RenderMode.SoftwareOnly;

            InitializeComponent();

            //鼠标双击，zoom in out后的图片回到初始状态
            sciChart.MouseDoubleClick += ResetZoom;

            //生成模拟实验数据
            var dataSeries1 = new XyDataSeries<int, double>();
            var dataSeries2 = new XyDataSeries<int, double>();
            double dou = 0;
            int XAxisLen = 10000;
            for (int i = 0; i < XAxisLen; i++)
            {
                dataSeries1.Append(i*5, Math.Sin(dou) * 100);
                dataSeries2.Append(i, Math.Cos(dou) * 100);
                dou += 0.01;
            }
            //创建一条折线
            lineSeries1 = new FastLineRenderableSeries
            {
                DataSeries = dataSeries1,
                Stroke = Colors.Red,
                PointMarker = new EllipsePointMarker { Width = 5, Height = 5, Fill = Colors.Green  }
            };
            //创建空心点
            lineSeries2 = new XyScatterRenderableSeries
            {
                DataSeries = dataSeries2,
                //PointMarker = new EllipsePointMarker { Width = 2, Height = 2, Fill = Colors.Yellow} 2,2是最小的点
                PointMarker = new EllipsePointMarker { Width = 4, Height = 4, Fill = Colors.Transparent, Stroke = Colors.Yellow, StrokeThickness = 1 }
            };

            sciChart.RenderableSeries.Add(lineSeries1);
            sciChart.RenderableSeries.Add(lineSeries2);

           
            //设定坐标范围
            sciChart.XAxis.VisibleRange = new DoubleRange(-10, XAxisLen / 10);
            sciChart.YAxis.VisibleRange = new DoubleRange(-100, 100);
            // 限制X轴的可视范围在0到10000之间
            sciChart.XAxis.VisibleRangeLimit = new DoubleRange(-10, 10000);
            // 限制Y轴的可视范围在0到100之间
            sciChart.YAxis.VisibleRangeLimit = new DoubleRange(-100, 100);

            // 保存初始的可视范围
            initialXRange = sciChart.XAxis.VisibleRange;
            initialYRange = sciChart.YAxis.VisibleRange;

            //一个水平线0轴注解线
            var 水平0辅助线 = new HorizontalLineAnnotation
            {
                Y1 = 0,
                Stroke = new SolidColorBrush(Colors.LightSlateGray),
                StrokeThickness = 1
            };
            sciChart.Annotations.Add(水平0辅助线);
            //一个垂直线0轴注解线    
            var 垂直0辅助线 = new VerticalLineAnnotation
            {
                X1 = 0,
                Stroke = new SolidColorBrush(Colors.LightSlateGray),
                StrokeThickness = 1
            };
            sciChart.Annotations.Add(垂直0辅助线);

            // 创建一个垂直线注解
            游标垂直线 = new VerticalLineAnnotation
            {
                X1 = 0,
                Stroke = new SolidColorBrush(Colors.LightSlateGray),
                StrokeThickness = 1,
                Visibility = Visibility.Collapsed
            };
            sciChart.Annotations.Add(游标垂直线);

            // 当鼠标移动时，如果垂直线注解可见，则更新其位置
            /*
             这段代码是一个事件处理程序，它处理了rolloverModifier的MouseMove事件。
            rolloverModifier是一个SciChart图表库中的交互式修饰器，它允许用户在鼠标移动时显示数据点的信息。
             */
            rolloverModifier.MouseMove += (s, e) =>
            {
                if (游标垂直线.Visibility == Visibility.Visible)
                {
                    var mousePoint = e.GetPosition(sciChart);
                    var xValue = sciChart.XAxis.GetCurrentCoordinateCalculator().GetDataValue(mousePoint.X);
                    游标垂直线.X1 = xValue;
                }
            };

            // 在最后再次设置垂直线注解的可见性
            游标垂直线.Visibility = Visibility.Collapsed;
            rolloverModifier.IsEnabled = false;
            //
        }

        private void OnButtonClick(object sender, RoutedEventArgs e)
        {
            lineSeries1.Visibility = lineSeries1.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
            lineSeries2.Visibility = lineSeries2.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
        }
        //双击改变zoom in/out 是否仅对Y轴缩放 


        //点击后，enable或disable垂直线注解    
        private void On游标查询Click(object sender, RoutedEventArgs e)
        {
            if (is游标查询可见)
            {
                游标垂直线.Visibility = Visibility.Collapsed;
                rolloverModifier.IsEnabled = false;
            }
            else
            {
                游标垂直线.Visibility = Visibility.Visible;
                rolloverModifier.IsEnabled = true;
            }
            is游标查询可见 = !is游标查询可见;
        }

        //使用鼠标右键，点击后，zoom in out后的图片回到初始状态
        //下面的函数图表的可视范围设置回初始值,然而我希望以当前点为中心,把坐标恢复到初始的范围   
        private void ResetZoom(object sender, MouseButtonEventArgs e)
        {
            // 获取当前鼠标的位置
            var mousePoint = e.GetPosition(sciChart);

            // 获取当前鼠标位置对应的数据值
            var xValue = sciChart.XAxis.GetCurrentCoordinateCalculator().GetDataValue(mousePoint.X);

            // 计算新的可视范围
            var initialXSize = (double)initialXRange.Max - (double)initialXRange.Min;
            var newXRange = new DoubleRange(xValue - initialXSize / 2, xValue + initialXSize / 2);


            // 将可视范围设置为新的范围
            sciChart.XAxis.VisibleRange = newXRange;
            sciChart.YAxis.VisibleRange = initialYRange;

        }
    }
}