WPF编程，Live Charts使用说明（30）——自定义设计

最新推荐文章于 2024-09-05 22:55:04 发布
最新推荐文章于 2024-09-05 22:55:04 发布
阅读量2k 收藏 5
点赞数 2
分类专栏： Live Charts 文章标签： wpf C# live charts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43307934/article/details/105523668
版权

在这里插入图片描述

后台

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
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.Threading;
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Wpf;
using Wpf.Annotations;
 
namespace Wpf.CartesianChart.MaterialCards
{
    /// <summary>
    /// Interaction logic for MaterialCards.xaml
    /// </summary>
    public partial class MaterialCards : UserControl, INotifyPropertyChanged
    {
        private double _lastLecture;
        private double _trend;
 
        public MaterialCards()
        {
            InitializeComponent();
 
            LastHourSeries = new SeriesCollection
            {
                new LineSeries
                {
                    AreaLimit = -10,
                    Values = new ChartValues<ObservableValue>
                    {
                        new ObservableValue(3),
                        new ObservableValue(5),
                        new ObservableValue(6),
                        new ObservableValue(7),
                        new ObservableValue(3),
                        new ObservableValue(4),
                        new ObservableValue(2),
                        new ObservableValue(5),
                        new ObservableValue(8),
                        new ObservableValue(3),
                        new ObservableValue(5),
                        new ObservableValue(6),
                        new ObservableValue(7),
                        new ObservableValue(3),
                        new ObservableValue(4),
                        new ObservableValue(2),
                        new ObservableValue(5),
                        new ObservableValue(8)
                    }
                }
            };
            _trend = 8;
 
#if NET40
            Task.Factory.StartNew(() =>
            {
                var r = new Random();
 
                Action action = delegate
                {
                    LastHourSeries[0].Values.Add(new ObservableValue(_trend));
                    LastHourSeries[0].Values.RemoveAt(0);
                    SetLecture();
                };
 
                while (true)
                {
                    Thread.Sleep(500);
                    _trend += (r.NextDouble() > 0.3 ? 1 : -1) * r.Next(0, 5);
                    Application.Current.Dispatcher.Invoke(DispatcherPriority.Normal, action);
                }
            });
#endif
#if NET45
            Task.Run(() =>
            {
                var r = new Random();
                while (true)
                {
                    Thread.Sleep(500);
                    _trend += (r.NextDouble() > 0.3 ? 1 : -1)*r.Next(0, 5);
                    Application.Current.Dispatcher.Invoke(() =>
                    {
                        LastHourSeries[0].Values.Add(new ObservableValue(_trend));
                        LastHourSeries[0].Values.RemoveAt(0);
                        SetLecture();
                    });
                }
            });
#endif
 
            DataContext = this;
        }
 
        public SeriesCollection LastHourSeries { get; set; }
        
        public double LastLecture
        {
            get { return _lastLecture; }
            set
            {
                _lastLecture = value;
                OnPropertyChanged("LastLecture");
            }
        }
 
        private void SetLecture()
        {
            var target = ((ChartValues<ObservableValue>)LastHourSeries[0].Values).Last().Value;
            var step = (target - _lastLecture) / 4;
#if NET40
            Task.Factory.StartNew(() =>
            {
                for (var i = 0; i < 4; i++)
                {
                    Thread.Sleep(100);
                    LastLecture += step;
                }
                LastLecture = target;
            });
#endif
#if NET45
            Task.Run(() =>
            {
                for (var i = 0; i < 4; i++)
                {
                    Thread.Sleep(100);
                    LastLecture += step;
                }
                LastLecture = target;
            });
#endif
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        protected virtual void OnPropertyChanged(string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
 
        private void UpdateOnclick(object sender, RoutedEventArgs e)
        {
            TimePowerChart.Update(true);
        }
    }
}

前台

<UserControl x:Class="Wpf.CartesianChart.MaterialCards.MaterialCards"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Wpf.CartesianChart.MaterialCards"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="500" d:DesignWidth="800"
             Background="#E9E9E9">
    <Grid Height="500" Width="650" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <Grid Margin="15, -60, 15, 15" MaxHeight="350">
            <Grid.Effect>
                <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
            </Grid.Effect>
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=Border1}" />
            </Grid.OpacityMask>
            <Grid.Resources>
                <Style TargetType="lvc:LineSeries">
                    <Setter Property="StrokeThickness" Value="3"></Setter>
                    <Setter Property="Stroke" Value="White"></Setter>
                    <Setter Property="Fill" Value="#4EFFFFFF"></Setter>
                    <Setter Property="PointGeometrySize" Value="0"></Setter>
                    <Setter Property="LineSmoothness" Value="0"></Setter>
                </Style>
                <Style TargetType="lvc:Axis">
                    <Setter Property="ShowLabels" Value="False"></Setter>
                    <Setter Property="IsEnabled" Value="False"></Setter>
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height=".50*"></RowDefinition>
                <RowDefinition Height=".5*"></RowDefinition>
            </Grid.RowDefinitions>
            <Border x:Name="Border1" Grid.Row="0" Grid.RowSpan="4" CornerRadius="5" Background="White" />
            <Border Grid.Row="0" Grid.RowSpan="3" Background="#CE2156" ></Border>
            <TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="18">
                    The Current Chart
            </TextBlock>
            <TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0,0,0,20">2014.12.25</TextBlock>
            <lvc:CartesianChart Grid.Row="2" Margin="0, 0, 0, 0" Series="{Binding LastHourSeries}" Hoverable="False" DataTooltip="{x:Null}">
                <lvc:CartesianChart.AxisX>
                    <!--a small visual improvement, lets hide the first points (x = 0, x=1) to get better animations-->
                    <lvc:Axis MinValue="2"></lvc:Axis>
                </lvc:CartesianChart.AxisX>
            </lvc:CartesianChart>
            <StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25, 0">
                <TextBlock Opacity=".4" FontSize="13">Total electricity Consumption <LineBreak /> of Galaxy SOHO</TextBlock>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="#303030" FontSize="40" Text="{Binding LastLecture, StringFormat={}{0:N1}}" />
                    <TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
                </StackPanel>
            </StackPanel>
        </Grid>
        
        <Grid Grid.Column="1" Margin="15, 20, 15, 15" MaxHeight="350">
            <Grid.Effect>
                <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
            </Grid.Effect>
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=Border2}" />
            </Grid.OpacityMask>
            <Grid.Resources>
                <Style TargetType="lvc:ColumnSeries">
                    <Setter Property="StrokeThickness" Value="0"></Setter>
                    <Setter Property="Stroke" Value="White"></Setter>
                    <Setter Property="Fill" Value="White"></Setter>
                    <Setter Property="MaxColumnWidth" Value="5"></Setter>
                </Style>
                <Style TargetType="lvc:Axis">
                    <Setter Property="FontSize" Value="12"></Setter>
                    <Setter Property="Foreground" Value="#64FFFFFF"></Setter>
                    <Style.Triggers>
                        <Trigger Property="AxisOrientation" Value="Y">
                            <Setter Property="IsMerged" Value="True"></Setter>
                            <Setter Property="MaxValue" Value="10"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
                <Style TargetType="lvc:Separator">
                    <Setter Property="StrokeThickness" Value="1"></Setter>
                    <Setter Property="Stroke" Value="#4BFFFFFF"></Setter>
                    <Style.Triggers>
                        <Trigger Property="AxisOrientation" Value="X">
                            <Setter Property="IsEnabled" Value="False"></Setter>
                            <Setter Property="Step" Value="1"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height=".50*"></RowDefinition>
                <RowDefinition Height=".5*"></RowDefinition>
            </Grid.RowDefinitions>
            <Border x:Name="Border2" Grid.Row="0" Grid.RowSpan="4" CornerRadius="5" Background="White" />
            <Border Grid.Row="0" Grid.RowSpan="3" Background="#EB5A13" ></Border>
            <TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="18">
                    Time Power
            </TextBlock>
            <TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0,0,0,20">2014.12.25</TextBlock>
            <Button Grid.Row="3" Width="40" Height="40" VerticalAlignment="Top" 
                    HorizontalAlignment="Right" Margin="20, -20" Panel.ZIndex="1"
                    Click="UpdateOnclick">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Grid.Effect>
                                <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
                            </Grid.Effect>
                            <Ellipse Stroke="Black" StrokeThickness="0" Fill="#CD2156">
                                
                            </Ellipse>
                            <Path Width="20" Height="20" Stretch="Fill" Fill="White" Data="F1 M 58,33.5001L 58,27L 49,19L 40,27.5001L 40,33.5001L 46,28.2097L 46,40.5C 46,46.299 41.299,51 35.5,51C 29.701,51 25,46.299 25,40.5C 25,34.8686 29.4332,30.2727 35,30.0117L 35,24.0074C 26.1186,24.2718 19,31.5546 19,40.5C 19,49.6127 26.3873,57 35.5,57C 44.6127,57 52,49.6127 52,40.5L 52,28.125L 58,33.5001 Z "/>
                            <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <lvc:CartesianChart Name="TimePowerChart" Grid.Row="2" Margin="10, 0, 10, 20"  Hoverable="False" DataTooltip="{x:Null}">
                <lvc:CartesianChart.Series>
                    <lvc:ColumnSeries Values="5,9,8,6,1,5,7,3,6,3"/>
                </lvc:CartesianChart.Series>
            </lvc:CartesianChart>
            <StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25, 0">
                <TextBlock Opacity=".4" FontSize="13">The Last 12 hours average <LineBreak /> Electricity Consumption</TextBlock>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="#303030" FontSize="40" Text="20.45" />
                    <TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>
子不语
关注
专栏目录
livecharts控件大全，wpf界面开发使用教程
08-27
记载了livecharts各种统计图，可以分离出来用作wpf自己的插件，有饼图，柱形图等等
WPF LiveCharts 圆环图表
余道长的博客
08-23 1028
<lvc:PieChart Grid.Row="1" Height="302" Width="264" Canvas.Left="162" Canvas.Top="65" Series="{Binding PieSeriesCollection}" SeriesColors="{Binding CloCollection}" InnerRadius="80"> </lvc:PieChart> InnerRadius：内...
WPF LiveCharts动态曲线（折线图）简介
gitblog_09794的博客
09-05 478
WPF LiveCharts动态曲线（折线图）简介 项目地址:https://gitcode.com/open-source-toolkit/267dd 概览 本仓库提供了一个示例项目，演示如何使用LiveCharts库在WPF应用中创建动态显示的折线图。通过这个项目，你可以学习到如何利用LiveCharts的强大功能来实现当数据超出图表当前视图范围时，X轴自动滚动更新的技术，确保用户能够持续观察...
WPF 的画图控件Chart应用于 实时显示曲线
Viccj的专栏
04-22 8064
WPF 的画图控件Chart应用于 实时显示曲线
WPF程序中好用的Chart控件
qq_42559618的博客
10-30 1627
今天要介绍的是WPF中好用的Chart控件，控件非常多，DynamicDataDisplay能够快速实现一些常用的基本功能，个人觉得比handycontrol图表好看些，处理起来也简单些，接下来简单介绍下基本使用步骤。疑似项目开源地址这个控件也是有的缺点，暂时没找到官方技术文档，使用都是通过别人分享。
WPF编程，Live Charts使用说明（10）——自定义工具提示和图例
君一席
04-11 8964
默认情况下，每个需要工具提示或图例的图表都将初始化DefaultLegend 或 DefaultTooltip的新实例 。 自定义默认值 可以自定义这些类，例如背景色，项目符号大小或方向: <lvc:CartesianChart Series="{Binding SeriesCollection}"> <lvc:CartesianChart.ChartLegend...
WPF使用LiveCharts的案例
08-22
里面主要包含LiveCharts的折线图、柱状图与扇形图。
WPF LiveCharts动态曲线(折线图）
最新发布
09-06
帖子地址：https://blog.csdn.net/qq_38693757/article/details/124594359 效果：使用LiveCharts插件，超过图表的最大值后，X轴会自动向右边移动，而不是所有曲线在原地起伏的效果
Live Charts 的源代码及demo
02-16
Live Charts是一款强大的数据可视化库，专为.NET开发者设计，尤其适用于Windows Presentation Foundation (WPF) 平台。它提供了丰富的图表类型，使得开发者能够轻松地将动态数据转化为直观的图表展示。在本文中，...
WPF中使用Chart控件
single209的专栏
06-02 3824
WPF中使用原生Chart控件
LiveCharts完成一个指定X和Y坐标的线形图（鼠标滚动缩放）
05-21
使用LiveCharts完成一个指定X和Y坐标的线形图形界面，通过指定X和Y可以减少无关或者平滑数据的展示，比如X在1到100时数据都是不变的，可以直接指定101的数据可直观展示0到101的线性情况。
WPF中，利用Livechart使用动态图表
helldoger的博客
06-11 1552
ViewModel利用消息机制从MainViewModel读取PLC的动态数值： using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.Messaging; using CommunityToolkit.Mvvm.Messaging.Messages; using Kx.Service.Entry; using Kx.Utils; using LiveCharts; using LiveCharts.Defaults;
WPF编程，Live Charts使用说明（5）——类型和配置
君一席
04-11 4409
LiveCharts可以绘制任何类型，甚至包括用户定义的类型，而不会丢失强类型语言的美观。这个概念很简单：传递通用值的集合，然后LiveCharts需要一个函数来提取X和Y（如果它是笛卡尔图表）。您也不需要定义每种类型来绘制它。 该库已经知道如何绘制double，int，decimal，short，float，long以及其他一些特殊设计的类：ObservableValue， Observabl...
WPF编程，Live Charts使用说明（7）——定制系列
君一席
04-11 3797
笔触和填充 所有系列都具有Stroke和Fill属性，这些属性处理颜色，两个属性类型均为System.Windows.Media.Brush，您可以使用复杂的填充或笔触。具体可以参考：填充 mySeries.Fill = Brushes.Red; mySeries.Stroke = Brushes.Blue; 笔划线型和厚度 使用Series.StrokeThickness您有需要，画虚线，那么...
WPF使用LiveCharts图表--基础用法
海盗Sharp的博客
12-14 6465
WPF使用LiveCharts图表--基础用法，安装LiveCharts.Wpf，安装LiveCharts.Wpf会自动安装依赖项LiveCharts，2个都安装了说明安装完成；使用LiveCharts,几种方式绘制曲线图，直接前端绘制曲线数据，后端事件添加数据，mvvm绑定
WPF显示数据图表(LiveCharts2)
zls365365的博客
05-04 4638
最近接手一个小项目，需要做一个数据显示大屏，要能显示曲线，显示进出量，重点是要好看我哪知道什么是好看，就随便做做呗。数据都是假的，只是做出一个效果。显示这种数据图，使用的是LiveCharts2。这是一个非常漂亮的Charts模块。官网如下：https://www.lvcharts.com/LiveCharts2支持的还挺多，我们在这里选择WPF。如果我们直接通过NuGet进行搜索，会发现找到的L...
WPF图表绘制（LiveCharts）
weixin_42585491的博客
01-10 6885
WPF图表绘制（LiveCharts） 效果如下图： 使用到的DLL：LiveCharts.dll、LiveCharts.Wpf.dll 1.折线图 xaml界面代码（前台代码） <lvc:CartesianChart Series="{Binding LineSeriesCollection}" LegendLocation="Right"> <lvc:CartesianChart.AxisY>
WPF编程，Live Charts使用说明（26）——环图
君一席
04-14 3121
后台 using System; using System.Linq; using System.Windows; using LiveCharts; using LiveCharts.Defaults; using LiveCharts.Wpf; namespace Wpf.PieChart { public partial class DoughnutChartExample ...
winform livecharts
01-18
基于.NET Framework的WinForm项目可以使用图表插件来实现数据可视化，其中一个常用的图表插件是LiveCharts。下面是使用LiveCharts在WinForm项目中创建图表的示例代码： 首先，确保你的WinForm项目已经引用了LiveCharts库。你可以通过NuGet包管理器来添加引用，或者手动下载并添加引用。 接下来，在你的WinForm窗体中添加一个Chart控件，可以通过拖拽方式添加或者在代码中动态创建。 然后，在窗体的代码文件中，导入LiveCharts命名空间，并使用以下代码来创建和配置图表： ```csharp using LiveCharts; using LiveCharts.Wpf; // 创建一个SeriesCollection对象，用于存储图表的数据系列 SeriesCollection seriesCollection = new SeriesCollection(); // 创建一个LineSeries对象，表示折线图 LineSeries lineSeries = new LineSeries(); // 设置折线图的标题和数据 lineSeries.Title = "折线图"; lineSeries.Values = new ChartValues<double> { 1, 3, 2, 8, 5 }; // 将折线图添加到SeriesCollection中 seriesCollection.Add(lineSeries); // 将SeriesCollection对象设置为Chart控件的Series属性 chart.Series = seriesCollection; ``` 以上代码创建了一个折线图，并将其添加到Chart控件中显示。你可以根据需要修改图表的类型、样式和数据。 请注意，以上示例代码是基于C#语言的WinForm项目，使用LiveCharts库来创建图表。如果你使用的是其他语言或其他图表插件，可能会有一些差异。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值