首页 > 其他分享 >WPF LiveChart 图表详解

WPF LiveChart 图表详解

时间:2024-09-18 11:03:57浏览次数:11  
标签:绑定 颜色 LiveChart 图表 详解 WPF Wpf 线条

引用LiveChart.Wpf

在使用的界面当中引用LiveChart.Wpf的类库

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

以直方图、折线图为例, 都属于 CartesianChart 下的一种 Series 类型, 例如折线图,如下:

<lvc:CartesianChart>
            <lvc:CartesianChart.Series>
                  <!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现-->
                <lvc:LineSeries/>  
            </lvc:CartesianChart.Series>
            </lvc:CartesianChart>

LinSeries 绑定数据设定Values即可, 可以看到带s, 则代表这是一种复数集合类型,继承于 IChartValues, 所以最终绑定的数据符合 ChartValues 即可, 下图绑定了为数字类型的集合:

 <lvc:CartesianChart>
            <lvc:CartesianChart.Series>
                <!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现-->
                <lvc:LineSeries Values="1,2,3,4,5,6"/>
                <lvc:LineSeries Values="2,4,6,8,10,12"/>
            </lvc:CartesianChart.Series>
           </lvc:CartesianChart>

为LiveChart的 X、Y轴添加标题

            <!--定义Y轴-->
            <lvc:CartesianChart.AxisY>
                <!-- 定义Y轴名称 -->
                <lvc:Axis Title="Value"></lvc:Axis>
            </lvc:CartesianChart.AxisY>
            
            <!--定义X轴-->
            <lvc:CartesianChart.AxisX>
                 <!-- 定义X轴名称 -->
                <lvc:Axis Title="Type"></lvc:Axis>
            </lvc:CartesianChart.AxisX>

图表显示设置

1.图例的显示位置: LegendLocation="Top" //显示在上方
2.图表的背景颜色: Background="#FFEFD5"

3.添加视觉元素: VisualElements,

如下所示添加一个文本在图表当中:

            <lvc:CartesianChart.VisualElements>
                <lvc:VisualElement X="0.5" Y="8">
                    <lvc:VisualElement.UIElement>
                        <TextBlock Foreground="Green">
                            Hello!, this is a note merged in the chart.
                        </TextBlock>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
            </lvc:CartesianChart.VisualElements>

LineSeries 样式设置

1.线条显示数值: DataLabels="True"
2.线条是否弯曲: LineSmoothness="0" 或 "1" 
3.线条的颜色: Stroke="Red"  //设置线条的颜色为红色
4.线条下方颜色: Fill="Pink" //线条的下方颜色
5.线条的每个点: PointGeometrySize="20" //设置数据点大小
6.显示数据字体颜色: Foreground="Red" 
7.数据点的颜色: PointForeground="#FF6347"
8.线条虚线: StrokeDashArray="5" //数值愈大间隔愈大, 如下绿色虚线

9.线条点的形状: PointGeometry //如下所示, 为数据点设置为一个矩形

        <lvc:LineSeries DataLabels="False" Stroke="#32CD32" StrokeThickness="1"   StrokeDashArray="5"
                                LineSmoothness="1" Foreground="Red"
                                Fill="#FFA07A" PointGeometrySize="10"   
                                Values="1,2,5,1,5,4">
                    <lvc:LineSeries.PointGeometry>
                        <GeometryGroup>
                            <RectangleGeometry Rect="50,50,25,25" />
                        </GeometryGroup>
                    </lvc:LineSeries.PointGeometry>
                </lvc:LineSeries>

X、Y坐标 样式设置

1.是否显示坐标点: ShowLabels="False"
2.坐标点的旋转角度: LabelsRotation="45"
3.坐标轴标签: Labels="A,B,C,D,E,F"  //示例
4.自定义显示格式: LabelFormatter

图表是否显示背景X、Y线:

以下代码设置,X、Y轴的宽度为1的颜色红色的实线:

<!--定义Y轴-->
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="Value"  ShowLabels="True">
                    <lvc:Axis.Separator>
                        <lvc:Separator StrokeThickness="1" Stroke="Red"  />
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
            
            <!--定义X轴-->
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Title="Type"  LabelsRotation="45" Labels="A,B,C,D,E,F" ShowLabels="True" >
                    <lvc:Axis.Separator>
                        <lvc:Separator StrokeThickness="1" Stroke="Red"  />
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>

定义饼状图

由于饼状图并没有X、Y轴的概念, 所以需要使用饼状图, 则使用 PieChart。
1.设定显示数据的格式: LabelPoint //该绑定的是一个Func的委托
Xaml绑定:

来源:https://www.cnblogs.com/zh7791/p/12617961.html

 

标签:绑定,颜色,LiveChart,图表,详解,WPF,Wpf,线条
From: https://www.cnblogs.com/ywtssydm/p/18418093

相关文章

  • WPF overlay on the icon in the taskbar via TaskbarItemInfo
    <Windowx:Class="WpfApp372.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft......
  • WPF打包独立运行的程序
    方案一:使用Costura.Fody插件将自己写的程序打包成一个可以独立运行的EXE文件第1步:安装Costura.Fody首先用VisualStudio2017打开你的解决方案,依次找到“工具”---“NuGet包管理”-“管理解决方案的NuGet程序包”,到了这一步会打开NuGet-解决方案页面,在浏览选项下面的搜索框内......
  • 函数新特性、内联函数、const详解
    函数新特性、内联函数、const详解函数新特性函数回顾与后置返回类型//1.前面放auto,标识函数返回类型放到参数列表之后//2.而放在参数列表之后的返回类型是通过->开始的autofunc(inta,intb)->void内联函数函数定义前加incline,这个普通函数就变成了内联函数......
  • MySQL中的存储过程(详解)
    前言:在数据库开发中,MySQL存储过程是一种非常强大的工具,可以提高数据库的性能、可维护性和安全性。本文将介绍MySQL存储过程的基本概念、语法和使用方法,并通过一些实际的例子来说明其在数据库开发中的应用。首先要知道我们为什么要学这个存储过程,因为当我们的SQL语句较为麻......
  • 滚雪球学SpringCloud[4.1讲]: Spring Cloud Gateway详解
    全文目录:前言APIGateway的概念与作用什么是APIGateway?APIGateway的作用:SpringCloudGateway的核心特性配置SpringCloudGateway1.引入依赖2.基本路由配置3.路由与过滤器的使用示例:路径匹配与过滤器4.动态路由与负载均衡示例:通过Eureka进行动态路由过滤器的......
  • USB协议详解第10讲(USB描述符-报告描述符)
    1.报告描述符的概念和作用开门见山,报告描述符就是描述报告(HID接口上传输事务中的数据)的一组数据结构。首先大家可能会问,报告又是什么?我们前面讲过,USB主机一般是以中断的方式向HID设备发送或者索取数据,也就是说USB主机发送一个请求,设备要根据硬件操作,向主机提交自己的状态变化,例......
  • 详解IPC(进程间通信)
    进程间通信(IPC,Inter-ProcessCommunication)是指在不同进程之间传递数据或信号的机制。由于进程之间的地址空间是独立的,IPC提供了一种在进程之间进行数据交换的方法。以下是几种常见的IPC机制:1.管道(Pipes)匿名管道匿名管道是单向的通信通道,通常用于具有亲缘关系的进程之间(如......
  • STM32F407单片机编程入门(三)ADC详解及实战含源码
    文章目录一.概要二.STM32F407VET6单片机ADC外设特点三.STM32单片机ADC内部结构图1.ADC相关引脚说明2.ADC通道分类3.触发源4.转换周期5.电压转换计算6.更精确电压转换计算四.规则通道ADC采集信号流向1.单次转换模式2.连续转换模式五.CubeMX配置一个ADC采集例程六.CubeMX......
  • 全国职业技能大赛大数据应用开发赛题任务B详解
    1、写在前言关于本篇:博主在团队中主要负责数据抽取、数据清洗、数据代码部分的编写,也就是任务书中的任务B模块,因此本片博客内容主要也会集中在任务B题目上关于代码风格:任务B的内容基本都是和spark打交道,众所周知spark有两种编写风格sql风格、dsl风格。两种风格功能都是能实现......
  • python标准库模块 pickle 详解
    什么是pickle模块?pickle是Python的一个标准库,用于序列化和反序列化Python对象。所谓序列化,就是将一个Python对象转换成字节流,以便存储到磁盘或通过网络传输。反序列化则是将字节流恢复为原来的Python对象。为什么使用pickle?保存Python对象:可以将Python中的各......