WPF实现折线图

最新推荐文章于 2024-06-05 17:52:44 发布
最新推荐文章于 2024-06-05 17:52:44 发布
阅读量1.6k 收藏
点赞数
文章标签： css3 vue web canvas c#
原文链接：https://mp.weixin.qq.com/s?__biz=MzI0NDE0MDgyNg==&mid=2649597821&idx=4&sn=c6a94be6885dfb1f39a4a2445161a88d&chksm=f17b5908c60cd01ee10327573f8b744e0e836820a840fd2404f762c62eb43ac8ee84bf6d7865&scene=126&&sessionid=0
版权

389c98dcf0c9193b272c064051d1e73a.png

01

—

代码如下

一、创建 LineChartExample.xaml 继承 UserControl代码如下。

31a0e843cfa8f046a565c6e0d372c307.png

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.LineChartExample"
             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:WPFDevelopers.Samples.ExampleViews"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             PreviewMouseDown="UserControl_PreviewMouseDown"
             Loaded="UserControl_Loaded">
    <Viewbox>
        <Grid Width="800" Height="600">
            <Grid x:Name="gArea"
              Background="{StaticResource ExtralightSolidColorBrush}"
              Margin="50,20,20,20">
            </Grid>
            <Popup Name="pop1"
               AllowsTransparency="True"
               IsOpen="False"
               Placement="Relative"
               StaysOpen="True">
                <Border Effect="{StaticResource NormalShadowDepth}"
                    Background="{StaticResource WhiteSolidColorBrush}"
                    Margin="10">
                    <Grid x:Name="gV"
                  Width="200"
                  Height="43">
                        <TextBlock x:Name="tbT"
                           Foreground="#0C0C26"
                           FontSize="14"
                           Margin="4,4,0,0"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Top"
                           Text="" />
                        <TextBlock x:Name="tbV"
                           Foreground="#0C0C26"
                           FontSize="14"
                           Margin="4,0,0,4"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Bottom"
                           Text="" />
                    </Grid>
                </Border>
            </Popup>
    </Grid>
    </Viewbox>


</UserControl>

二、创建LineChartExample.xaml.cs代码如下

7f85ba8764d063d0da69d558ea2782cc.png

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;


namespace WPFDevelopers.Samples.ExampleViews
{
    /// <summary>
    /// LineChartExample.xaml 的交互逻辑
    /// </summary>
    public partial class LineChartExample : UserControl
    {
        double maxYMarginTop = 20D;//Y轴上方的空白间距
        double yMarginLeft = 30D;//Y轴左侧，用来显示刻度文字的空白间距


        double yNum = 10D;//Y轴的刻度个数
        int yNumInt = 10;//Y轴的刻度个数


        double minY = 10D;//Y轴最小值
        double maxY = 110D;//Y轴最大值
        double yInterval = 10D;//Y轴刻度


        double xMarginBottom = 20D;//X轴下侧，用来显示刻度文字的空白间距


        double xNum = 25D;//x轴的刻度个数
        int xNumInt = 25;//x轴的刻度个数
        double xIntervalLineHeight = 10D;//X轴刻度线的高度
        DateTime minX = Convert.ToDateTime("2021-07-14 00:00:00");//X轴最小值
        DateTime maxX = Convert.ToDateTime("2021-07-15 00:00:00");//X轴最大值
        public LineChartExample()
        {
            InitializeComponent();
        }


        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            gArea.Children.Clear();


            //X轴刻度值，因为要留出左右空白，所以画的时候多画一格，实际计算减1
            double timeInterval = (maxX.ToOADate() - minX.ToOADate()) / (xNum - 1);


            //折线数据
            Dictionary<DateTime, int> csource = new Dictionary<DateTime, int>();
            csource.Add(Convert.ToDateTime("2021-07-14 09:00:00"), 23);
            csource.Add(Convert.ToDateTime("2021-07-14 10:00:00"), 46);
            csource.Add(Convert.ToDateTime("2021-07-14 11:00:00"), 18);
            csource.Add(Convert.ToDateTime("2021-07-14 12:00:00"), 88);
            csource.Add(Convert.ToDateTime("2021-07-14 13:00:00"), 34);
            csource.Add(Convert.ToDateTime("2021-07-14 14:00:00"), 45);
            csource.Add(Convert.ToDateTime("2021-07-14 15:00:00"), 61);
            csource.Add(Convert.ToDateTime("2021-07-14 16:00:00"), 33);
            csource.Add(Convert.ToDateTime("2021-07-14 17:00:00"), 78);
            csource.Add(Convert.ToDateTime("2021-07-14 18:00:00"), 90);
            csource.Add(Convert.ToDateTime("2021-07-14 19:00:00"), 18);
            csource.Add(Convert.ToDateTime("2021-07-14 20:00:00"), 50);


            //折线数据
            Dictionary<DateTime, int> bsource = new Dictionary<DateTime, int>();
            bsource.Add(Convert.ToDateTime("2021-07-14 09:00:00"), 66);
            bsource.Add(Convert.ToDateTime("2021-07-14 10:00:00"), 56);
            bsource.Add(Convert.ToDateTime("2021-07-14 11:00:00"), 87);
            bsource.Add(Convert.ToDateTime("2021-07-14 12:00:00"), 33);
            bsource.Add(Convert.ToDateTime("2021-07-14 13:00:00"), 54);
            bsource.Add(Convert.ToDateTime("2021-07-14 14:00:00"), 27);
            bsource.Add(Convert.ToDateTime("2021-07-14 15:00:00"), 80);
            bsource.Add(Convert.ToDateTime("2021-07-14 16:00:00"), 23);
            bsource.Add(Convert.ToDateTime("2021-07-14 17:00:00"), 43);
            bsource.Add(Convert.ToDateTime("2021-07-14 18:00:00"), 77);
            bsource.Add(Convert.ToDateTime("2021-07-14 19:00:00"), 56);
            bsource.Add(Convert.ToDateTime("2021-07-14 20:00:00"), 43);




            //画X轴
            Rectangle rx = new Rectangle();
            rx.Height = 1;
            rx.Stroke = new SolidColorBrush(Color.FromRgb(128, 128, 142));
            rx.HorizontalAlignment = HorizontalAlignment.Stretch;
            rx.VerticalAlignment = VerticalAlignment.Bottom;
            gArea.Children.Add(rx);


            //画Y轴
            Rectangle ry = new Rectangle();
            ry.Width = 1;
            ry.Stroke = new SolidColorBrush(Color.FromRgb(128, 128, 142));
            ry.HorizontalAlignment = HorizontalAlignment.Left;
            ry.VerticalAlignment = VerticalAlignment.Stretch;
            gArea.Children.Add(ry);


            //画Y轴横虚线
            for (int i = 0; i < yNumInt; i++)
            {
                Line ly = new Line();
                ly.X1 = 0;
                ly.Y1 = ((gArea.ActualHeight - maxYMarginTop) / yNum * i) + maxYMarginTop;
                ly.X2 = gArea.ActualWidth;
                ly.Y2 = ((gArea.ActualHeight - maxYMarginTop) / yNum * i) + maxYMarginTop;
                ly.Stroke = new SolidColorBrush(Color.FromRgb(73, 73, 91));
                ly.StrokeThickness = 1;
                ly.StrokeDashArray = new DoubleCollection() { 10, 15 };//实线的长度和间距


                TextBlock tb = new TextBlock();
                tb.FontSize = 12;
                tb.Foreground = new SolidColorBrush(Color.FromRgb(128, 128, 142));
                tb.Text = (maxY - (i * yInterval)).ToString();
                tb.VerticalAlignment = VerticalAlignment.Top;
                tb.HorizontalAlignment = HorizontalAlignment.Left;
                tb.Margin = new Thickness(-yMarginLeft, (((gArea.ActualHeight - maxYMarginTop) / yNum * i) + maxYMarginTop) - (GetFontSizeByTextBlock(tb).Height / 2D), 0, 0);
                gArea.Children.Add(tb);
                gArea.Children.Add(ly);
            }


            //画X轴刻度线
            for (int i = 0; i < xNumInt; i++)
            {
                Line ly = new Line();
                ly.X1 = (gArea.ActualWidth / xNum * i) + ((gArea.ActualWidth / xNum) / 2D);
                ly.Y1 = gArea.ActualHeight;
                ly.X2 = (gArea.ActualWidth / xNum * i) + ((gArea.ActualWidth / xNum) / 2D);
                ly.Y2 = gArea.ActualHeight - xIntervalLineHeight;
                ly.Stroke = new SolidColorBrush(Color.FromRgb(128, 128, 142));
                ly.StrokeThickness = 1;


                if (i % 2 == 0)//两个刻度显示一次文字
                {
                    TextBlock tb = new TextBlock();
                    tb.FontSize = 12;
                    tb.Foreground = new SolidColorBrush(Color.FromRgb(128, 128, 142));
                    if (i < 10)//个位数补零
                    {
                        tb.Text = "0" + i.ToString() + ":00";
                    }
                    else
                    {
                        tb.Text = i.ToString() + ":00";
                    }
                    tb.VerticalAlignment = VerticalAlignment.Bottom;
                    tb.HorizontalAlignment = HorizontalAlignment.Left;
                    tb.Margin = new Thickness((gArea.ActualWidth / xNum * i) + ((gArea.ActualWidth / xNum) / 2D) - (GetFontSizeByTextBlock(tb).Width / 2D), 0, 0, -xMarginBottom);
                    gArea.Children.Add(tb);
                }


                gArea.Children.Add(ly);
            }


            Polyline plView = new Polyline();
            plView.Stroke = new SolidColorBrush(Color.FromRgb(66, 120, 255));
            plView.StrokeThickness = 1;
            plView.StrokeLineJoin = PenLineJoin.Round;
            plView.IsHitTestVisible = false;
            foreach (DateTime k in csource.Keys)
            {
                Point p = new Point();
                p.X = (gArea.ActualWidth / xNum * ((k.ToOADate() - minX.ToOADate()) / timeInterval)) + ((gArea.ActualWidth / xNum) / 2D);
                p.Y = ((gArea.ActualHeight - maxYMarginTop) / (maxY - minY) * (maxY - csource[k])) + maxYMarginTop;
                plView.Points.Add(p);


                Ellipse ep = new Ellipse();
                ep.Width = 10;
                ep.Height = 10;
                ep.Stroke = new SolidColorBrush(Color.FromRgb(230, 230, 236));
                ep.StrokeThickness = 0;
                ep.Fill = new SolidColorBrush(Color.FromRgb(66, 120, 255));
                ep.HorizontalAlignment = HorizontalAlignment.Left;
                ep.VerticalAlignment = VerticalAlignment.Top;
                ep.Margin = new Thickness(p.X - 5, p.Y - 5, 0, -5);//底部设置-5(圆球宽高的一半)，当Y等于0的时候，可以让圆球全部显示
                ep.MouseEnter += Ep_MouseEnter;
                ep.MouseLeave += Ep_MouseLeave;
                ep.MouseLeftButtonDown += Ep_MouseLeftButtonDown;
                ep.Tag = k + "|" + csource[k];
                gArea.Children.Add(ep);
            }
            gArea.Children.Add(plView);




            Polyline plPeople = new Polyline();
            plPeople.Stroke = new SolidColorBrush(Color.FromRgb(27, 221, 58));
            plPeople.StrokeThickness = 1;
            plPeople.StrokeLineJoin = PenLineJoin.Round;
            plPeople.IsHitTestVisible = false;
            foreach (DateTime k in bsource.Keys)
            {
                Point p = new Point();
                p.X = (gArea.ActualWidth / xNum * ((k.ToOADate() - minX.ToOADate()) / timeInterval)) + ((gArea.ActualWidth / xNum) / 2D);
                p.Y = ((gArea.ActualHeight - maxYMarginTop) / (maxY - minY) * (maxY - bsource[k])) + maxYMarginTop;
                plPeople.Points.Add(p);


                Ellipse ep = new Ellipse();
                ep.Width = 10;
                ep.Height = 10;
                ep.Stroke = new SolidColorBrush(Color.FromRgb(230, 230, 236));
                ep.StrokeThickness = 0;
                ep.Fill = new SolidColorBrush(Color.FromRgb(27, 221, 58));
                ep.HorizontalAlignment = HorizontalAlignment.Left;
                ep.VerticalAlignment = VerticalAlignment.Top;
                ep.Margin = new Thickness(p.X - 5, p.Y - 5, 0, -5);//底部设置-5(圆球宽高的一半)，当Y等于0的时候，可以让圆球全部显示
                ep.MouseEnter += Ep_MouseEnter;
                ep.MouseLeave += Ep_MouseLeave;
                ep.MouseLeftButtonDown += Ep_MouseLeftButtonDown;
                ep.Tag = k + "|" + bsource[k];
                gArea.Children.Add(ep);
            }
            gArea.Children.Add(plPeople);
        }
        private void Ep_MouseLeave(object sender, MouseEventArgs e)
        {
            Ellipse ep = sender as Ellipse;
            ep.StrokeThickness = 0;
        }


        private void Ep_MouseEnter(object sender, MouseEventArgs e)
        {
            Ellipse ep = sender as Ellipse;
            ep.StrokeThickness = 2;
        }
        private void Ep_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Ellipse ep = sender as Ellipse;
            string[] ts = ep.Tag.ToString().Split('|');


            pop1.PlacementTarget = ep;
            pop1.VerticalOffset = -46;
            pop1.HorizontalOffset = -26;
            tbT.Text = "时间：" + ts[0];
            tbV.Text = "数量：" + ts[1];
            pop1.IsOpen = true;
        }


        //测量文本框的尺寸
        public static Size GetFontSizeByTextBlock(TextBlock tb)
        {
            var formattedText = new FormattedText(
               tb.Text,
               CultureInfo.CurrentUICulture,
               FlowDirection.LeftToRight,
               new Typeface(tb.FontFamily, tb.FontStyle, tb.FontWeight, tb.FontStretch),
               tb.FontSize,
               tb.Foreground
               );
            Size size = new Size(formattedText.Width, formattedText.Height);
            return size;
        }
        private void UserControl_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            if (pop1.IsOpen)
            {
                pop1.IsOpen = false;
            }
        }


    }
}

02

—

效果预览

鸣谢素材提供者 - 刘开双

源码地址如下

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF开发者QQ群： 340500857 

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者 出处 https://github.com/yanjinhuagood

技术群：添加小编微信并备注进群

小编微信：mm1552923   

公众号：dotNet编程大全    

zls365365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF 折线图
ADC06的博客
05-09 1825
一 。折线图 (一)安装和查看值 1. 需要联网安装,通过Nuget安装LiveCharts，搜索安装。 2.想查看需要使用的值，点击对象管理器，查LiveCharts.Wpf.Series， 里面有需要用的值。 安装完成的效果。 (二) 视图代码: <Border Grid.Column="2" BorderBrush="#ECEDF2" BorderThickness="1" Margin="5"> <lvc:CartesianChart Series="{Bi
WPF贝塞尔绘制折线图
06-30
在本文中，我们将深入探讨如何使用Windows Presentation Foundation (WPF)和C#来实现一个动态的贝塞尔曲线绘制折线图。WPF是.NET Framework的一部分，它提供了丰富的用户界面（UI）开发工具，包括强大的图形渲染能力...
WPF绘制折线
weixin_30553837的博客
06-11 178
WPF后台绘制折线，填充到一个GRID下 private void btnPreview_Click(object sender, RoutedEventArgs e) { GridImg.Children.Clear(); System.Drawing.Point p0 = new System.Drawing.Poin...
WPF通过Canvas画板自定义绘制折线图并生成图片
最新发布
上山的人啊，请不要嘲讽下山的神
06-05 389
WPF绘制折线图控件和折线图，并生成图片，里面详细给出了过程，控件的每个组成，手动绘制虽麻烦，但却有无限拓展空间
wpf-折线图绘制1
陆沙的博客
09-13 2322
背景 【问题描述】我想绘制一个折线图，包含多条折线，每条的数据量大概在1w~10w之间，要求1.可以流畅拖动 2.某些位置可以显示数值 3.放大缩小不会严重卡顿 4.不要收费。 【工具调研】（没记录出处，一般来自用户手册或博客） Drawing Visual：不提供布局/事件处理，适合绘制背景或剪贴画 Live-charts：数据量>2k可能会卡顿 Scicharts：基本可以满足我的需求，但是收费 解决方案 InteractiveDataDisplay.WPF-v1.0 安装的话直接NuGet安
WPF绘制折线图
lxq915的专栏
07-06 8541
绘制折线图的函数如下：  protected void DrawingLine(double drawwidth, double drawheight,double[] value,DateTime[] datetime)         {             double farTop = 10;             double farBottom = 10;
WPF 实现折线图
dotNET跨平台
04-16 250
WPF 实现折线图控件名：ChartLine作 者：WPFDevelopersOrg - 驚鏵原文链接[1]：https://github.com/WPFDevelopersOrg/WPFDevelopers码云链接[2]：https://gitee.com/WPFDevelopersOrg/WPFDevelopers框架支持.NET4 至 .NET8；Visual Studio 2022...
WPF自定义动态折线图
12-09
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现自定义动态折线图。WPF是微软提供的一种用于构建桌面应用程序的框架，它提供了丰富的UI设计能力和强大的图形处理能力。折线图是一种...
wpf动态折线图-demo
08-30
在WPF（Windows Presentation Foundation）中，动态折线图是一种常用的数据可视化工具，它能够实时更新数据并以图形的方式展示，常用于监控、数据分析和仪表盘应用。本项目"wpf动态折线图-demo"应该包含一个示例，...
用C#2017_WPF实现柱状图、饼图、折线图样例.rar
12-31
本文将深入探讨如何使用WPF和C# 2017来实现柱状图、饼图和折线图这三种常见的数据可视化图表。 首先，柱状图是一种常用的数据表示方式，用于比较不同类别的数量或频率。在WPF中，我们可以使用各种库，如OxyPlot或...
WPF柱状图/饼图/折线图/面积图
09-06
3. **WPF折线图（Line Chart）** 折线图是用线条连接一系列数据点，适合展示趋势和变化。在WPF中，`LineSeries`类用于创建折线图。与前面的图表类似，我们通过绑定数据源和数据点属性来实现。`LineSeries`还支持...
wpf 折线图 柱形图 饼状图
03-05
wpf 折线图 柱形图 饼状图 代码简单易懂 适于学习
WPF柱状图饼状图折线图
11-16
WPF柱状图饼状图折线图,功能很实用，举一反三。
WPF制作折线图
u013823548的博客
04-25 7336
最近发现WPF的高级进阶版原来是制作图表和动画。遂制作两个图表进行尝试。1、折线图https://www.cnblogs.com/endlesscoding/p/6670432.html2、
WPF 动态折线图
maxradish
12-09 688
在开发过程中，我们可能遇到范围值，如一个对象最大值是5000，最小值是0，我们需要将其进行缩放，放到一个折线图上，也有可能我们需要增加多条折线图动态向左移动。
WPF LiveCharts动态曲线(折线图）
热门推荐
熊思雨的博客
05-05 1万+
前端： <Window x:Class="WpfApplication7.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=L.
wpf-折线图绘制2-oxyplot-2
陆沙的博客
09-24 1567
上一篇在：wpf-折线图绘制2-oxyplot-1 设置图本身 IsLegendVisible = true; // 是否显示图例 PlotAreaBorderColor = OxyColors.Transparent; // 图边界的颜色 这些都是model层的设置，对应上一篇，就是_viewModel.SimplePlotModel的属性。 设置坐标轴 简单示例 LinearAxis xAxis = new LinearAxis() { Position = AxisPosition.Bott
Livechart2的简单使用，画一个折线图（wpf）
weixin_42031602的博客
03-23 986
就是入门怎么画一个折线图，在wpf中
wpf dynamicdatadisplay折线图的数据绑定
04-01
WPF DynamicDataDisplay是一个开源的.NET图形库，可用于创建各种交互式图形，包括折线图、散点图、热力图等。以下是WPF DynamicDataDisplay折线图的数据绑定的示例代码： 1. 首先，在XAML文件中定义动态数据显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值